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.)
Have you tried The Holy Grail? I’ve had success with it in the past