Cannot apply background

[jimfog]

I cannot apply background in an element(#yellowbox) and i cannot understand what am i doing wrong:Here is the html code:

 <div  id="yellowbox">		<div  class="box"><jdoc:include type="modules" name="bottom" style="table" /></div>		<div  class="box"><jdoc:include type="modules" name="right" style="table" /></div>		</div>

and here is the css:

#yellowbox {clear:left;	height:auto;	position:relative;	left:45px;		margin-left:auto;	margin-right:auto;	width:auto;	background-color:#00F;}

As you see above, the yellowbox element contains another 2 elements, class box.Here is the code for these two also:

.box {float:left;padding-left:25px;}

Thanks

[jeffman]

It's the floating content. For some reason, when all the content floats, the logical height of the container does not grow. The browser treats it as 0, so no background is visible. Adding this rule to #yellowbox should do the trick:overflow: hidden;

[jimfog]

It's the floating content. For some reason, when all the content floats, the logical height of the container does not grow. The browser treats it as 0, so no background is visible. Adding this rule to #yellowbox should do the trick:overflow: hidden;

You were right(again).With overflow: hidden; i fixed the issue.Sometimes, i am confused by the way the floating property affects the layout-appearance of elements.Thanks.

[jeffman]

Float can be very confusing. The trick I showed you seems to have been discovered by a developer and was not intentionally designed by W3C. This is a good argument for hanging out on boards like this one.