Welcome to WebmasterWorld Guest from 54.166.114.43

Forum Moderators: not2easy

Message Too Old, No Replies

Divs inside divs

   
3:51 am on Sep 29, 2007 (gmt 0)

10+ Year Member



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>

6:00 am on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.

6:32 am on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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]

6:35 am on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member




<br style="clear:both; />

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

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

6:49 am on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Marshall

6:51 am on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Marshall, just that... didn't want matthewamzn to run up against more problems if he missed it
7:05 am on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Marshall

7:26 am on Sep 29, 2007 (gmt 0)

5+ Year Member



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.

5:34 pm on Sep 29, 2007 (gmt 0)

10+ Year Member



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>

6:58 pm on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

7:14 pm on Sep 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<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;
}

 

Featured Threads

Hot Threads This Week

Hot Threads This Month