Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Nested DIVs height: problem

Trying to get child DIV to automatically adjust to parent's height.

8:43 pm on Feb 20, 2006 (gmt 0)

10+ Year Member

I am having difficulty trying to get child DIV to automatically adjust to parent's height. Here's my CSS:

#menubar {padding-top: 15px; margin-right: 77px; float: left; width: 163px; height: 100%; border: 0; background-color: #2B04BD;}
#content {float: left; width: 95%; background-color: #ffffff;}

Now my #content DIV is filled with dynamic content, so the height of the div will change day-to day. The code on the page reads simply:

<div id="content">
<!--####### Sidebar-->
<div id="menubar">
Side Menu ---
<!--####### End Sidebar-->

Now since the #menubar DIV has a colored bg, I would like it to continue all the way down to the bottom of the #content DIV. Is setting the height to 100% not enough? I thought this was acceptable, but obviously I am doing something wrong! I have tried searching Google for "Nested DIVs" and other like searches, but have been unsuccessful in finding my problem in particular. Any help on this matter is GREATLY appreciated!


-- Zak

10:09 pm on Feb 20, 2006 (gmt 0)

5+ Year Member

Now, wouldn't that be nice. I think this is a bug, and simply does not work (100% height that is).

Maybe someone knows a trick, because I can use an answer too. :)

4:41 pm on Feb 21, 2006 (gmt 0)

5+ Year Member

Why don't you put a background in the parent container that has both the content and sidebar backgrounds in it.

Google for faux columns.