homepage Welcome to WebmasterWorld Guest from 107.20.25.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Divs inside divs
matthewamzn




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

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




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

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




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

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




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


<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




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

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

Marshall

vincevincevince




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

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

Marshall




msg:3464433
 7:05 am on Sep 29, 2007 (gmt 0)

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

Marshall

Basman




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved