Trouble in river city with CSS

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.

Answer 2

I might have misunderstood what you want, but try this:

Replace div#intro_container with:

div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}

And remove the height property from div#messagebox.

Answer 3

I prefer to do in this way:

In the content of div 'main-content', add

In your case it was

<div id="main_content">
    <div id="navigation">..</div>
    <div id="intro_container">..</div>
</div>

It cam be rewritten as

<div id="main_content">
    <div id="navigation">..</div>
    <div id="intro_container">..</div>
    <div style="clear:both"></div>
</div>

AFAIK This is a standard way to achieve what are you doing.