Floating Objects Losing Background Color Of Container

Floating UL's

[coldfused]

Why does this not work?

=======================================

<div style="background-color:#CCCCCC;">

<ul style="float:left">
<li>erewrwer</li>
<li>werwerwer</li>
</ul>

<ul style="float:left;">
<li>erewrwer</li>
<li>werwerwer</li>
</ul>

</div>

=======================================

The background color does not hold for the div unless you set the div container to a specific height.

Thanks in advance,
Carl

[vincevincevince]

<div style="background-color:#CCCCCC;">
 
<ul style="float:left">
<li>erewrwer</li>
<li>werwerwer</li>
</ul>
 
<ul style="float:left;">
<li>erewrwer</li>
<li>werwerwer</li>
</ul>
<br style="clear:both">
</div> 

Floated elements don't necessarily take up space within the DIV, which means it effectively shrinks to height:0px. The added element above forces the <br> to be below both floated DIVs, and as it itself is not a floated element, the DIV will stretch down around it.

[coldfused]

It actually shrinks it to 1 or 2 pixels. You could still see the colored stroke of the background I was looking for which is what made it so frustrating.

Awesome. Thanks.