treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Need Help Getting BG Color to work for Div

  • I am working on an assignment for school:
    http://weblab.devry.edu/WGD232DSUM11A/lpehrson/lab2/
    I cannot get the background-color to show up for the content div. It won't work when I have the column divs on top of it.

    Both the CSS and XHTML validated.

    Any ideas why the background color won't show up?
  • This is because you haven't cleared your floats.

    Essentially, the content div only contains items which are floated. Floated items are taken out of the regular flow of the document, thus not giving the content div any height (in other words, the content div doesn't think it is containing anything).

    This is perfectly fine and a tough concept for beginners to wrap their head around. Here's a great article by Chris: http://css-tricks.com/795-all-about-floats/

    The easiest solution for you is adding overflow: hidden; to your div#content.

    Another solution would be to add a "clearing div" just before you #content div closes. HTML:
    	 <div class="clear"></div>
    </div><!-- close content -->

    CSS:
    .clear { clear: both; }
  • Aaa, thank you! It's starting to make a lot more sense now :D.