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

A Tale of Two Divs

kallyone
P: 3
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
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

kallyone
P: 3
Thanks I will look into it.
May 2 '07 #3

P: 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.