CSS Three Column Layout - Column Height Problem
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;
ba开发者_开发知识库ckground-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
加载中,请稍侯......
精彩评论