Three column css help

[Northstar]

I'm a little new to css so forgive me if I ask something dumb. I'm using this three column css and need all three columns to expand down evenly as content is added to the center column. I would set the height to auto but I need them to stay at a minimum of 800px. I tried setting the min-height: 800px; but it didn't work. What am I doing wrong here? Here is what i'm working on.

* { padding: 0; margin: 0; }

body {
text-align: center;
background-color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.5em;
font-weight: bold;
color: #FFFFFF;

}

#wrapper {
width: 922px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
}
#header {
color: #333;
width: 920px;
float: left;
height: 111px;
background-color: #666666;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(header_bg.gif);
background-repeat: no-repeat;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ccc;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
}

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
font-style: normal;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #12417B;
}

#navigation {
float: left;
width: 922px;
color: #333;
padding: 0px;
margin: 0px;
background-color:#FFFFFF;
height: 24px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
background-repeat: repeat;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}

#navmenu{
position:relative;
display:block;
height:24px;
font-size:12px;
font-weight:bold;
font-family:Arial, Verdana, Helvitica, sans-serif;
background-color: transparent;
background-image: url(bgOFF.gif);
background-repeat: repeat-x;
background-position: left top;
}
#navmenu ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
}
#navmenu ul li{
display:block;
float:left;
margin:0 1px 0 0;
}
#navmenu ul li a{
display:block;
float:left;
color:#000;
text-decoration:none;
height:24px;
padding-top: 4px;
padding-right: 54px;
padding-bottom: 0;
padding-left: 55px;
}
#navmenu ul li a:hover,#navmenu ul li a.current{
color:#fff;
background:transparent url(bgON.gif) repeat-x top left;
}
#page_desc {
position:absolute;
left:970px;
top:16px;
width:290px;
height:90px;
z-index:1;
padding: 3px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

#content {
float: left;
color: #333333;
margin: 0px;
width: 512px;
display: inline;
background-color: #FFFFFF;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
height: 795px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: normal;
font-size: 12px;
padding: 10px;
}

#content a:link {
color:#0066FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

#rightcolumn {
color: #000000;
margin: 0px;
width: 174px;
float: left;
background-color: #666666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
height: auto;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
text-decoration: none;
min-height: 800px;
}

#leftcolumn {
color: #000000;
margin: 0px;
width: 174px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
background-color: #666666;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
height: 800px;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
font-weight: normal;
}

#menu {
list-style: none;
width: 150px;
padding-top: 2px;
height: auto;
padding-left: 3px;
text-align: left;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000000;
border-bottom-color: #000000;
}
#menu ul{
list-style: none;
margin: 0px;
padding: 0px;
}

#menu a:link{
color: #FFFFFF;
font-family: Trebuchet MS;
font-size: 14px;
height: 23px;
display:block;
text-decoration: none;
padding: 2px 0 0 0px;
font-weight:normal;
}

#menu a:visited{
text-decoration: line-through;
}

#menu a:hover{
color: #0E3C75;
}

#menu a:active{
color: #dbdbdb;
}

#footer {
width: 900px;
clear: both;
color: #333;
background-color:#F3F2ED;
margin: 0px 0px 10px 0px;
padding: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
}

a.foot:link {
color: #000000;
text-decoration: none;
}
a.foot:visited {
color: #000000;
text-decoration: none;
}
a.foot:hover {
color: #0066FF;
text-decoration: underline;
}

[edited by: Northstar at 7:32 pm (utc) on Sep. 24, 2008]

[swa66]

To make them really equal in height compared to something that's variable: you cannot do that with CSS alone, you'll need some JavaScript.

You can however fake it: add a footer element in the parent of your 3 columns (since you float all 3 of them) and give is clear:both. This will prevent the parent from collapsing and stretches it to fix all columns. Since you columns are fixed width, create a background for the parent of the columns that gives the optical illusion you seek, and apply that to the parent.