By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Centered div with unknown width and floating elements inside

P: n/a
Hi,

I'm trying to make a centered box with an image and two links inside,
one link on each side.

Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

I'm tempted to use a table but certainly there is a better way. :)

Regards,
André

Apr 5 '07 #1
Share this Question
Share on Google+
6 Replies


P: n/a
André Hänsel wrote:
Hi,

I'm trying to make a centered box with an image and two links inside,
one link on each side.

Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

I'm tempted to use a table but certainly there is a better way. :)
Resist temptation. Try this (or something like it):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Cats in sinks</title>

<style type="text/css">
body { margin: 0; padding:0; }
..outerContainer { width:900px; margin-left:auto; margin-right:auto;
background-color:#FF9900; }
..pageLink { font-family:Arial, sans-serif; font-weight:bold;
font-size:95%; color:#9F2D00; padding:1em 25px; }
..prev {float:left;}
..next {float:right;}
..outerContainer img { padding:0 25px 25px; }
</style>
</head>

<body>
<div class="outerContainer">
<a href="#" class="pageLink prev">Previous</a>
<a href="#" class="pageLink next">Next</a>
<img style="clear:both;"
src="http://kundenweb.creations.de/usenet/katzen/box.jpg"
alt="sample pic" width="850" height="578">
</div>
</body>
</html>

HTH.
--
John
Apr 5 '07 #2

P: n/a
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
André Hänsel wrote:
Hi,

I'm trying to make a centered box with an image and two links inside,
one link on each side.

Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

I'm tempted to use a table but certainly there is a better way. :)

Resist temptation. Try this (or something like it):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Cats in sinks</title>

<style type="text/css">
body { margin: 0; padding:0; }
.outerContainer { width:900px; margin-left:auto; margin-right:auto;
background-color:#FF9900; }
.pageLink { font-family:Arial, sans-serif; font-weight:bold;
font-size:95%; color:#9F2D00; padding:1em 25px; }
.prev {float:left;}
.next {float:right;}
.outerContainer img { padding:0 25px 25px; }
</style>
</head>

<body>
<div class="outerContainer">
<a href="#" class="pageLink prev">Previous</a>
<a href="#" class="pageLink next">Next</a>
<img style="clear:both;"
src="http://kundenweb.creations.de/usenet/katzen/box.jpg"
alt="sample pic" width="850" height="578">
</div>
</body>
</html>
Perhaps OP will be confused by you using his whole pic (that
includes pic of browser window)! Try

src="http://members.optushome.com.au/droovies/pics/catinsink.jpg"

in your code and see what you are recommending to him. It is not
quite what he was picturing but perhaps you can adjust. If you
absolutely refuse, I will have to do it. I am feeling lazy. But I
liked the puss in the sink.

--
dorayme
Apr 6 '07 #3

P: n/a
dorayme wrote:
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
>>André Hänsel wrote:
>>>Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

I'm tempted to use a table but certainly there is a better way. :)

Resist temptation. Try this (or something like it):
<rest of my first code snipped>
> <img style="clear:both;"
src="http://kundenweb.creations.de/usenet/katzen/box.jpg"
alt="sample pic" width="850" height="578">
>
Perhaps OP will be confused by you using his whole pic (that
includes pic of browser window)! Try

src="http://members.optushome.com.au/droovies/pics/catinsink.jpg"

in your code and see what you are recommending to him. It is not
quite what he was picturing but perhaps you can adjust. If you
absolutely refuse, I will have to do it. I am feeling lazy. But I
liked the puss in the sink.
Okay, okay; how about this, new and improved:

http://mypage.bluewin.ch/jlh/CatsInSinks.htm

--
John
Apr 6 '07 #4

P: n/a
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
dorayme wrote:
In article <46**********@news.bluewin.ch>,
John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:
>André Hänsel wrote:

Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg
....

Perhaps OP will be confused by you using his whole pic (that
includes pic of browser window)! Try

src="http://members.optushome.com.au/droovies/pics/catinsink.jpg"

in your code and see what you are recommending to him. It is not
quite what he was picturing but perhaps you can adjust. If you
absolutely refuse, I will have to do it. I am feeling lazy. But I
liked the puss in the sink.

Okay, okay; how about this, new and improved:

http://mypage.bluewin.ch/jlh/CatsInSinks.htm
That looks like you are cooking with gas now... I hope OP thanks
you.

--
dorayme
Apr 7 '07 #5

P: n/a
On 6 Apr., 14:01, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
dorayme wrote:
In article <46156c73$...@news.bluewin.ch>,
John Hosking <J...@DELETE.Hosking.name.INVALIDwrote:
>André Hänsel wrote:
>>Here is an image of what I want:
http://kundenweb.creations.de/usenet/katzen/box.jpg

Okay, okay; how about this, new and improved:

http://mypage.bluewin.ch/jlh/CatsInSinks.htm
Thanks for your effort, but hey, you cheated! ;) You set a width for
the container div.

The problem I had (and you came across, too) is, that I don't know the
width of the image. That was what I meant by "of unknown width".

Best regards,
André

Apr 9 '07 #6

P: n/a
André Hänsel wrote:
On 6 Apr., 14:01, John Hosking wrote:
>>
http://mypage.bluewin.ch/jlh/CatsInSinks.htm


Thanks for your effort, but hey, you cheated! ;) You set a width for
the container div.

The problem I had (and you came across, too) is, that I don't know the
width of the image. That was what I meant by "of unknown width".
Hmmm. Overlooked that part. In that case: <table>. :-(

--
John
Apr 10 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.