Welcome to WebmasterWorld Guest from 54.226.46.6

Forum Moderators: not2easy

Message Too Old, No Replies

Floating Objects Losing Background Color Of Container

Floating UL's

     

coldfused

5:13 am on Aug 27, 2007 (gmt 0)

10+ Year Member



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

6:01 am on Aug 27, 2007 (gmt 0)

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



<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

12:06 pm on Aug 27, 2007 (gmt 0)

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month