<div id="hmContent">
<div class="sl01" ></div>
<div id="clear"> </div>
<div class="sl02" ></div>
<div id="clear"> </div>
<div class="sl03" ></div>
<div id="clear"> </div>
</div> <!-- end of hmContent -->
hm content is not containing the three divs. I go to google chrome to inspect it. and it has a height of 0. While it should have at least the same height as the divs that it contains. I did place a “clear” div before its closing tag.
i really don’t see why it is not working. far as i can see it is correct.
Any really simple glaring mistakes I am not picking up on?
#clear{
margin:0px;
padding:0px;
}
#hmContent{
width: 100%;
height:auto;
margin:0px auto;
background-color:#ff5500;
}
#hmContent .sl01{
width:30.55555555555555%;
background-color: #b2d1d1;
height:300px;
margin:0px 10px;
border-left: 2px solid #000;
float:left;
}
#hmContent .sl02{
width:30.55555555555555%;
background-color: #b2d1d1;
height:300px;
margin:0px 10px;
//margin-left:30.55555555555555%;
border-left: 2px solid #000;
float:left;
}
#hmContent .sl03{
width:30.55555555555555%;
background-color: #b2d1d1;
height:300px;
margin:0px 10px;
//margin-left:61.11111111111109%;
border-left: 2px solid #000;
float:left;
}
I had to read that 10 times and then I finally figured it out. Lol. I kept reading it as… “Hmmm the content” but its obviously hmcontent. You floated the inards. So the outer collapses. You can do many ways. But the easiest is either float the outer also or give it overflow hidden.
hmmm. yes!
holy smoke eric, you are indeed a site point wizard. your solution worked.
I had not realized that that floating the inner divs would affect the container div as it did.
Thank you.
d
ps…looks like floating the container and giving it overflow:hidden; have the same results. any differences i should watch out for?
Thx
Thanks bud. They both will do the exact same thing. Overflow hidden will cut off any content that extrudes outside the box. And if floating the outer container you then need to contain or clear it. Simply adding clear both to the following element will clear it. Or you can add another element to do it
<br style="clear:both>
It depends what else is happening on the page. Obviously if you flat the outer element you might then have the same problem with ITS parent element, and you can end up floating everything just to contain these few divs, which isn’t a sensible way to build a page. I would tend to get out of the float and go to overflow:hidden as soon as you can, so that the only elements that you have floating are those that actually need to be floated.