Keeping Column even height using CSS w/floats

I am floating my columns using CSS. I am having issues keeping the height even when I add content. When I add content to Main, for instance, the height grows but Content2 and Content3 stay the same. How do I change the CSS so that Please see below for the layout and the code. Please help!

--------------------------------------
Ś************************************Ś
Ś************Advertisement***********Ś
--------------------------------------
Ś************************************Ś
Ś**************Logo******************Ś
--------------------------------------
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś****Main******Ś**Content2**ŚContent3Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
Ś**************Ś************Ś********Ś
--------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body
{
background: gray;
height: auto;
}
#canvas
{
margin: 0;
padding: 0;
width: 1024px;
height: auto;
}
#TopAdvBanner
{
background: #9c3;
width: 1024px;
height: 150px;
}
#LogoBanner
{
background: #cc9;
height: 100px;
}
#content
{
background: #361;
float: left;
width: 1024;
height: auto;
}
#MainContent
{
background: #999;
width: 410px;
float: left;
margin: 0px;
padding: 0px;
height: auto;
}
#Content2
{
background: #234;
width: 350px;
height: auto;
float: left;
height: auto;
}
#Content3
{
background: #723;
width: 264px;
float: left;
height: auto;
}
</style>
</head>

<div id="TopAdvBanner">
<h1>Top Banner</h1>
</div>

<div id="LogoBanner">
Logo Banner
</div>

<div id="MainContent">
Main Content
asdfadsf
asdfasdffgsdfg
asdfadsfasdfadsfadsfasdfasdfasdfasdfasdf
</div>

<div id="Content2">
Content 2
</div>

<div id="Content3">
Content 3
</div>

</div>

</div>
</body>
</html>

Keeping Column even height using CSS w/floats

dauricejordan

icantthinkofone

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week