homepage Welcome to WebmasterWorld Guest from 54.145.209.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

5+ Year Member



 
Msg#: 3432939 posted 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

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



 
Msg#: 3432939 posted 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

5+ Year Member



 
Msg#: 3432939 posted 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