Question about CSS layout: stretch a div till the bottom of the page?

1

Hi ppl,

I have a question about a site I’m doing. This is my first try on CSS website design. I’m trying to create a website that has a couple of topbars (logo, menu, submenu, photo & contact info), a content part (with 2 columns) and a footer. The entire site should have a height of 100% and should be cross browser compatible.
Now I have all this, except for one thing. The content (2 columns) doesn’t stretch to the top of the footer (which is @ the bottom of every page). I want the page to have a height of 100%, even if the content of the page isn’t enough to stretch it to that. The content (2 columns) should always be strechted till the top of the footer, and the footer should always be @ the bottom of the page, except if the content is larger then 100% screen height of course. The right column in my content has a background color so it’s noticable when that column isn’t stretched all the way till the bottom of the screen. Please help me!

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
		<meta name="generator" content="Adobe GoLive"/>
		<title>CSS Test</title>
		<link href="test3.css" rel="stylesheet" type="text/css" media="all"/>
	</head>

	<body>
		<div id="wrapper">
			<div id="topbar">
				<p>Logo</p>
			</div>
			<div id="mainmenu">
				<p>Home | Wie zijn we? | Diensten | Portfolio | Pers | Contact</p>
			</div>
			<div id="submenu">
				<p>Test | Test | Test</p>
			</div>
			<div id="fotocontactwrapper">
				<div id="topphoto">
					<p>Foto</p>
				</div>
				<div id="contactinfo">
					<p>Contactgegevens</p>
				</div>
			</div>
			<div id="contentrightbarwrapper">
				<div id="content">
					<p>Lorem ipsum trlalalalala.</p>
				</div>
				<div id="rightbar">
					<p>Laatste projecten</p>
				</div>
			</div>
			<div id="footer">
				<p>Footer</p>
			</div>
		</div>
	</body>

</html>

html, body
	{
		min-height: 100%;
		width: 100%;
		height: 100%;
		text-align: center;
		margin: 0;
		padding: 0
	}

#wrapper
	{
		min-height: 100%;
		width: 830px;
		text-align: left;
		position: relative;
		height: auto !important; /* for modern browsers */
		height: 100%; /* for IE */
		top: 0;
		background-color: #FFFFFF
	}

p
	{
		margin: 0px;
		padding: 0px	
	}

#topbar
	{
		margin-left: 30px;
		width: 770px;
		height: 49px
	}

#mainmenu
	{
		margin-left: 30px;
		width: 770px;
		height: 20px;
	}

#submenu
	{
		margin-left: 30px;
		width: 770px;
		height: 29px;
		background-color: #CCCCCC
	}

#fotocontactwrapper
	{
		margin-left: 30px;
		width: 770px;
		height: 128px;
	}

#topphoto
	{
		width: 485px;
		height: 128px;
		float: left
	}

#contactinfo
	{
		width: 284px;
		float: right;
		height: 128px;
		background: #CCC		
	}

#contentrightbarwrapper
	{
		margin-left: 30px;
		width: 770px;
		height: auto
	}

#rightbar
	{
		width: 284px;
		float: right;
		height: auto;
		background: #EFEFEF
	}

#content
	{
		width: 485px;
		float: left;
		height: auto
	}

#footer
	{
		position: absolute;
		bottom: 0; /* important */
		left: 30px;
		width: 770px;
		background: #CCCCCC;
		height: 20px
	}