469,632 Members | 1,681 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,632 developers. It's quick & easy.

A Tale of Two Divs

kallyone
The below code is an example of what will not work for me. I have two divs inside a div and one is the menu and one is the contents or main section in the page. I want the content div to set the height based on the information contained within and then I want the menu div to adjust to match it. Cannot get it to work. Please help?

#page {
border-bottom: 1px solid #000000;
}

#menu {
border-right: 1px solid #000000;
width:100px;
height:100%;
float:left;
}

#content {
border-right: 1px solid #000000;
width:200px;
float:left;
}


<body>

<div id="page">

<div id="menu">
Menu<br />
Menu<br />
Menu<br />
Menu<br />
</div>

<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</div>

</div>

</body>
May 1 '07 #1
3 1328
drhowarddrfine
7,435 Expert 4TB
The problem you are having is caused by the fact that floats only expand to contain their content. (IE does this but that is a bug). There are a couple of ways around this. One is to make the height of the interior divs 100%, as you have, but 100% of what? While you may say "of #page", what is the height of #page?

So you must set a dimension for that or set it to 100% but, again, ask the question 100% of what? Working further up the tree, you have to set html and body to 100%, also. 100% of what? Of the viewport.

You may have to play with all this to get exactly what you want.

Another technique is called "faux columns". Google for that.
May 1 '07 #2
Thanks I will look into it.
May 2 '07 #3
have u tried it with fauxcolumn?
do u know how to state the height of sub container to 100% of the main container?
do we need to specify main container in that case?
May 6 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by David Winter | last post: by
15 posts views Thread by red | last post: by
3 posts views Thread by Marc | last post: by
39 posts views Thread by WindAndWaves | last post: by
12 posts views Thread by meltedown | last post: by
2 posts views Thread by sicapitan | last post: by
2 posts views Thread by patrick j | last post: by
11 posts views Thread by dusk | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.