Question

Ok here is the site:

http://danberinger.com/

If you view the source for the HTML and CSS you can see that I have set the height of the div in the middle to 100% and given it an overflow property value of hidden, it is called “main_content”. I realized that the height value is having no effect on what is displayed, the overflow value of hidden is allowing the background color of the main_content div to extend down to the footer. I guess I am wondering what the best way for me to achieve a variable div height on each page or “main_content” while maintaining the background color. Am I doing this the right way or am I using some kind of css hack that is not the proper way to do it. All insight is welcome. Make sure to take a look at the source HTML and CSS before giving me an answer.

Answer 1

The easiest solution would be to assign the background color to your body element. Something like this:

body {
 margin: 0;
 padding: 0;
 width:100%;
 height:100%;
 background-color:#cccccc;
}

This will also eliminate the few pixel white border around the edges, if you want to maintain that, take out the margin and padding declarations.