Question

I’m working on a website, trying to get the basic skeleton of my design to enable me to add content and have it grow the div to the length of the content. My problem is that it seems that as soon as the page loads, it only shows the background color of the div for the initial browser window size.. I’m not doing a very good job explaining; honestly because I’m not sure what the problem is, I just know it isn’t working correctly.

Thanks!

Answer 1

The problem is you have floated elements inside of #fauxcolumns that you’re not clearing. The solution is to clear them.

The easiest way is to add overflow:hidden to #fauxcolumns like this:

#fauxcolumns {
    ...
    overflow: hidden;
    ...
}

This question shows other clearing methods if you want to see options:
What methods of ‘clearfix’ can I use?

You also don’t need to have height:100% on everything, and definitely not on #fauxcolumns as it will clip content that’s below the “fold”.