CSS Three Column Layout - Column Height Problem

Question

I am starting with CSS and have run into the 'equal column height' problem', where floated DIVs have different height depending on their content. I have found several workarounds and attempted to apply this one , but havend been successful: in a three column layout all three columns are extended, but the left and the right column seem to overlap with the footer section. (This happens in IE 8 and in FF 3.5.10) Here is the picture:

I would like all three columns to be of the same size and placed betweed the header and the footer section. Here is the HTML:

<body>

    <div id="container">
        <div id="top">
            <h1>Header</h1>
        </div>
        <div id="leftnav">
            <p>Left</p>
        </div>
        <div id="rightnav">
            <p>RightNav</p>
        </div>
        <div id="content">
            <p>Content</p>
        </div>
        <div id="footer">
            <h4>Footer</h4>
        </div>
    </div>

</body>

and here is current the CSS:

body
{
    font-family: Verdana, Sans-Serif;
    font-size:0.75em;
    line-height:1.5em;
    margin:1.5em;

}

#container
{
    overflow:hidden;
    min-width: 50em;
    margin: 0.625em auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
}

#top
{
    padding: 0.5em;
    background-color: #ddd;
    border-bottom: 1px solid gray;
}

#top h1
{
    padding: 0;
    margin: 0;
}

#leftnav
{
    float: left;
    width: 10em;
    margin: 0;
    padding: 1em;
    background-color:#ec7;
}

#rightnav
{
    float: right;
    width: 10em;
    margin: 0;
    padding: 1em;
    background-color:#db6;
}

#content
{
    margin-left: 10em;
    margin-right: 10em;
    padding-left:3em;
    padding-right:3em;
    padding-top:1em;
    min-width:10em;
    text-align:justify;
    background-color:#bab;
}

#leftnav, #rightnav, #content
{
    padding-bottom:1000em;
    margin-bottom:-1000em;
}

#footer
{
    clear: both;
    margin: 0;
    padding: 0.5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
}

As you can see, I am a CSS beginner, and the above is the result of copy/paste and different tweaks I have attempted, so any help is appreciated,

(I have posted this question elsewhere, but without response.)

Answer 1

Have you tried The Holy Grail ? I've had success with it in the past

CSS Three Column Layout - Column Height Problem

Question

1 answers

solution1
1 ACCPTED 2010-07-11 08:38:01

CSS Three Column Layout - Column Height Problem

Question

1 answers

solution1 1 ACCPTED 2010-07-11 08:38:01

solution1
1 ACCPTED 2010-07-11 08:38:01