Jump to content

Cannot apply background


jimfog
 Share

Recommended Posts

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

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...