6

I'm not sure what I'm doing wrong but having trouble applying background color for #content. But it works fine if I set the height value to let say 800px. but I want it to be either auto or 100% as this template will be used throughout the site. any advice would be greatly appreciated.

<div class="content_bg"> <div id="content"> <div id="contentLeft"> </div> <div id="contentRight"> <div id="ContentPane" runat="server" /> </div> </div> </div> <div class="footer_bg"> <div id="footer"> <div id="footerLeft"> </div> <div id="footerRight"> </div> </div> </div> /* ==================================================================== Content Area ==================================================================== */ .content_bg { background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top; overflow:hidden; } #content { width:980px; margin:auto; height:auto; background:#fff; } #contentLeft { float:left; width:209px; margin-top:50px; } #contentRight { float:right; width:770px; margin:20px 0 0 0; } /* ==================================================================== Footer ==================================================================== */ .footer_bg { background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top; clear:both; } #footer { width:980px; height:258px; margin:auto; background:#dadad9 url(images/interior_footer.jpg) no-repeat center top; } #footerLeft { width:400px; height:50px; float:left; padding: 20px 0 0 25px; } #footerRight { width:100px; height:50px; float:right; padding: 20px 0 0 0; }
Improve this question
2
  • mind adding the html as well? Commented Feb 19, 2013 at 21:06
  • you have no content. height:auto; and height:100%; will still be 0px tall because you have nothing inside of them. the reason it works when you set a px height is because it forces a specific height. its not that the bg color isnt showing, its that your div is 0px tall. Commented Feb 19, 2013 at 21:10

4 Answers 4

Reset to default
20

Set the overflow to auto for #content.

#content { width:980px; margin:auto; height:auto; background:#fff; overflow:auto; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@johnny - Because the content collapses when the children are floated and adding the overflow rule restores the behavior you'd expect.
Anyone struggling with a div showing background color in chrome, firefox and other browsers but failing to show div background color in Internet Explorer, this solution here will solve your problem. Thanks a bunch for this answer!
4

The problem is that #content has no content. Since you are using height:100% for the div's height, it will expand to the full height of its parent div (i.e. .content_bg). However, .content_bg has no content either; therefore it is expanding to 100% of zero.

Improve this answer

1 Comment

actually I do. I just modified the HTML code. sorry. It's generated from server since it's a CMS website.
0

Try adding the class to your id <div id="content" class="content_bg"> and erase the class. And give your class these propertis 

.content_bg { background-color: white; width: 100%; height: 100%; }

Then the content in your id "content" will define the width and height.

Improve this answer

Comments

0

You are having a problem applying background to #content because you didn't clear the floats. Add

<div style="clear:both"></div>

After

 <div id="contentLeft"> </div> <div id="contentRight"> <div id="ContentPane" runat="server" /> </div>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.