Positioning a nested box at the bottom of Parent Box

Newbie question about CSS Layout

[scottiecla]

Starting my first CSS layout and I've probably created a design that is too complex...

I have a box and within that box I want to align a shorter box to the bottom of the parent box.

Sounds simple to me, but I can't seem to make it happen.

If I shouldn't post code, please feel free to edit, but here is what I have:

#top-nav {
width: 120px;
height: 100px;
float: right;
text-align: left;
font-family : Arial, Helvetica, sans-serif;
font-size : smaller;
color: #ffffff;
}
#client {
width: 120px;
height: 15px;
text-align: center;
font-family : Arial, Helvetica, sans-serif;
font-size : smaller;
color: #ffffff;
background-color: #668099;
top: 85px;
}
The top one is the parent box, the bottom one is the child. I thought that by using the top: attribute I could push it to line up with the bottom of the table, but that's not working. I tried bottom: 0px; but it ignored that one as well.

Any help appreciated!

[Nick_W]

Can we get the HTML snippet aswell please?

Nick

[scottiecla]

Sure! Here it is:

<div id=green-header>
<div id=top-nav>
Site Map<br>
Contact Us<br>
Quote Request<br>
<div id=client>
Client Login
</div>
</div>
</div>

I should have mentioned it is a child of a child... maybe that is the problem?

Here is the green-header CSS:

#green-header
{
height: 100px;
width: auto;
float: right;
background-color: #669999;
}

Thanks again for your help!

[BlobFisk]

This is untested, but what about adding vertical-align: bottom; to the box you wish to align to the bottom of the parent box? This should align the bottom of the box to the bottom of the parent element.

Support is a bit dodgy for this one - so testing it is the first step!

[scottiecla]

Thanks for the suggestion, BlobFisk.

That one didn't work either... I'm about ready to start coding a table and be done with it!

[Spook]

Hmmm. This appears to be a solution 'though there is still a problem with NN7 and Opera 7 in that the "green header" does not expand to the full screen width. Works fine in IE6 though.

Changes to CSS only shown.

Let me know what you think.

#top-nav {
height: 80px;
float: right;
clear : right;
}
#client {
float:right;
clear : right;
}

and html:

<div id=green-header>
<div id=top-nav>
Site Map<br>
Contact Us<br>
Quote Request<br>
</div>
<div id=client>
Client Login
</div>
</div>

Spook

[Spook]

Also, changing

#green-header
{
width: 100%;
}

Will solve the width issue.

Spook

[scottiecla]

Hi Spook- thanks for your help. It didn't change anything- the box still floats in the center of the parent box...

Thanks for trying, though.

[Spook]

Hi.

I'm guessing that's because you haven't removed the #client div out of the #topnav div as per the revised HTML above.

I've tested it in IE6 NN7 Opera7 and Mozilla 5 and it works ok - unless I have missunderstood what you want.

Spook

[scottiecla]

You are absolutely right! I missed that. It is working now.

Thanks so much-