Divs inside divs

[matthewamzn]

I have two divs setup in a container div. How can I adjust the container div's height based on the contents of the interior divs?

#container2 {
clear:left;
padding:5px;
}
#container2, #nav1, #search {
background-color:#b2d281;
color:#3b5d14;
font-weight:bold;
}
#nav1 {
float:left;
width:659px;
margin-left:5px;
}
#nav1 li, #nav1 ul {
display:inline;
list-style:none;
}
#search {
float:left;
width:200px;
}

--------------------------------------

<div id="container2">
<div id="nav1">
<ul>
<li>Some Navigation Stuff</li>
</ul>
</div>
<div id="search">
Search box is here.
</div>
</div>

[Xapti]

the reason your container div is collapsing is because both the contained divs are floated. floated elements do not count for calculating stuff like height and such. One of the simplest ways is to add another element (any element, you should probably make it height:0px or something) with the property of clear:both on it.

another option is to add the container div style "overflow:auto", which (I don't know in detail why) also fixes the problem, but with some exceptions. IE needs haslayout for it to work I think, so find a method to add haslayout. zoom:1 works as long as you don't mind ousting IE5 (cause it doesn't support it, or am I getting mixed up?) or something. Assigning width and stuff works too.

[Marshall]

Just add

<div id="container2">
<div id="nav1">
<ul>
<li>Some Navigation Stuff</li>
</ul>
</div>
<div id="search">
Search box is here.
</div>
<br style="clear:both; />
</div>

Marshall

Should be <br style="clear:both;" />. Sorry I missed the closing quote.

[edited by: Marshall at 6:50 am (utc) on Sep. 29, 2007]

[vincevincevince]

<br style="clear:both; />

<br style="clear:both;" />? Note now fixed above

[edited by: vincevincevince at 6:51 am (utc) on Sep. 29, 2007]

[Marshall]

Are you pointing out the fact I missed typing the closing quote (sorry) or is it someting else?

Marshall

[vincevincevince]

Marshall, just that... didn't want matthewamzn to run up against more problems if he missed it

[Marshall]

Thank you! :) That's what I get for posting messages while working on a web at the same time.

Marshall

[Basman]

Using the 'overflow:auto;' it should look a bit like this:

div#container2 {
top:180px;
position:relative;
float:left;
width:859px;
display:block;
overflow:auto;
}
div#nav1{
position:relative;
float:left;
width:659px;
margin-left:5px; 
display:block;
}
div#search{
position:relative;
float:left;
width:200px;
display:block;
}

Hope this will help.

[matthewamzn]

I couldn't get the overflow to look right (it kept wanting to put in scroll bars?). I used the page break, but I had to use a div tag (not sure why). This is the final code:

#container2 {
clear:left;
padding:5px;
}
#container2, #nav1, #search {
background-color:#b2d281;
color:#3b5d14;
font-weight:bold;
}
#nav1 {
float:left;
width:659px;
margin-left:5px;
}
#nav1 li, #nav1 ul {
display:inline;
list-style:none;
}
#search {
float:left;
width:200px;
}
.spacer {
clear:both;
height:0px;
}

--------------------------------------

<div id="container2">
<div id="nav1">
<ul>
<li>Some Navigation Stuff</li>
</ul>
</div>
<div id="search">
Search box is here.
</div>
<div class="spacer"></div>
</div>

[rocknbil]

There are (to my knowledge) three ways to do this.

Clearing div or object as exemplified by Marshall. Unfortunately, a clear will clear to the bottommost corner all objects before it - if you have, say, three columns and attempt to clear an item in the rightmost column, it can clear all the way to the bottom of the longest of the first two columns.

Overflow property as exemplified will often force objects to clear to the bottom of the containing div. You can try overflow:hidden.

Floats within floats is another way, if the above won't work. A floated object will always contain ("shrink-wrap", clear to) all of it's floated children, so if you find yourself in a pickle where clearing or overflow is not working, float the parent object, that will also do it.

[HarryM]

<div class="spacer"></div>

If I remember correctly, some older browsers don't like empty divs.

It may not be neccessary today, but I always use:

<div class="clear">&nbsp;</div>

.clear{
height:0;
font-size:0;
line-height:0;
clear:both;
}