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

CSS Forum

    
Floating Objects Losing Background Color Of Container
Floating UL's
coldfused




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

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




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

<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




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

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.

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