CSS - Skinned Site With 1 Column Fluid Height

<style>
#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:70%;
    background:yellow;
}

</style>

<div id="container1">
    <div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis   augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere   sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
    <div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis   augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere   sem. In feugiat ante in orci ultricies non sagittis felis consectetur.   In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu   venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula   sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet   mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula.   Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi   tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed   cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere   tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat.   Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis   feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales   eget facilisis a, sollicitudin id lorem. </p>
            <p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut   commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat   volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse   nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac   habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent   nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam   sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum   lorem. Morbi pharetra sem at justo dictum non imperdiet libero   convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim   consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit   amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel   tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>
   
</div>

#col2 {
    float:left;
    width:70%;
    background:yellow;
}

#body {
 position:relative;
 margin:0 auto;
 width:94%;
 min-width:50em;
 max-width:70em;
 border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
 height: 185px;
 background-color:#ffffff;
 background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {

 background: #ffffff url(../images/design/background_3.gif) repeat-y left;

 border-top:none;
 border-bottom:none;
}
#wrapper {

 background: url(../images/design/background_2.gif) repeat-y right;
}

#container {
 width: 100%;
 float: left;
 margin-right: -200px;
 background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
 margin-right: 200px;
 /*background: url(../images/design/background_3.gif) repeat-y left;*/

}
#main {
/*border:1px solid #000000;*/
 margin-left: 150px;
/*  background-color:#bbbbbb;*/
}
#left {
 position: absolute;
 top:189px;
 width: 140px;
/* height: 100%;*/
 float: left;
 text-align: left;
/* border-left: 2px solid #bbbbbb;*/
 font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
 width: 200px;
 float: right;
  clear:right;
}
#footer {
/* border: 1px solid #000000;*/
 background: #304773;
 height: 30px;

}

.last {
 margin-bottom: 0;
}
.clearing {
 height: 0;
 clear: both;
}

  <div id="body">
    <div id="header"><h1>Welkom bij Overeem de Haas</h1>
    </div>
    <div id="outer_wrapper">

      <div id="wrapper">
        <div id="container">
          <div id="content">
          
            <div id="main">
            </div>

            <div id="left">
                 <? include ("../include/navigatie.inc"); ?>
            </div>

            
          </div>
        </div>
        <div id="sidebar">
            <? include ("../include/uitloggen.inc");?>
            <? include ("../include/winkelmand.inc"); ?>
        </div>
        <div class="clearing">&nbsp;</div>
      </div>

    </div>

    <div id="footer"><p class="content"></p></div>
  </div>

    <div id="navigatie">
            <ul>
               <li class="menu">Navigatie menu</li>
               <li><a href="index.php">Home pagina</a></li>
               <li><a href="#">Wat is Overeem?</a></li>
               <? ...
                 echo "<li><a href=\"#\">Contact</a></li>";
                 echo "</ul>";
                 echo "</div>";
               ?>

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Three Columns</title>
		<style type="text/css">
			*, html, body {
				margin: 0;
				padding: 0;
				font-size: 100%;
			}
			html, body {
				width: 100%;
				height: 100%;
			}
			#maincontainer {
				position: relative;
				height: 100%;
				background: #eee;

			}
			#left {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200px;
				background: #fbb;
				height: 100%;
			}
			#mid {
				position: relative;
				margin: 0 200px 0 200px;
				background: #efe;
				height: 100%;
			}
			#right {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 200px;
				background: #bbf;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="maincontainer">
			<div id="left">
				left start<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left end<br />
			</div>
			<div id="mid">
				mid start<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid end<br />
			</div>
			<div id="right">
				right start<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right end<br />
			</div>
		</div>
	</body>
</html>

<body>
<div id="topper">
  <div>
    <a href="">Header</a>
  </div>
</div>

<div id="contentHolder">
	<div id="wideBox">
		<div id="mainBox">
			<div id="frame" class="homeFrame">
  				<img src="i/home.jpg" alt="Park Hill Christian Church" />
			</div>
			<div id="nav">
  				<p><a href="">Menu 1</a> <a href="">Menu 2</a> <a href="">Education</a> <a href="">Menu 3</a> <a href="">Menu 4</a> <a href="">Menu 5</a> <a href="">Menu 6</a></p>
			</div>
			<div id="right">
				Column Right
			</div>
			<div id="lineBacker">
				<div id="content" class="homeContent">
					<h1>Welcome!</h1>
					<p>Body Content</p>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
  		<p>Footer</p>
	</div>
</div>
</body>

body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #940609;
}

a {
  text-decoration: none;
}

img {
  border: 0;
}


/*
  MAIN DIV STYLES
*/

#topper {
  width: 100%;
  background-color: #FFFFFF;
}

#topper div {
  width: 705px;
  margin: 0 auto 0 auto;
  color: #940609;
  text-align: right;
  padding: 5px 0 5px 0;
}

#topper div a, #topper div a:visited {
  color: #940609;
}

#contentHolder {
  position: relative;
  width: 100%;
}

#wideBox {
  position: relative;
  width: 100%;
  border-top: 10px solid black;
  background-color: #BD2A2F;
}

#mainBox {
  position: relative;
  width: 725px;
  margin: 0 auto 0 auto;
  border-left: 10px solid black;
  border-right: 10px solid black;
  background-color: #000;
}

#frame {
  border-right: 10px solid black;
  float: left;
  background-color: #000000;
}

.homeFrame {
  width: 188px;
}

#nav {
  float: right;
  width: 507px;
  padding: 0px 10px 0px 10px;
  border-bottom: 10px solid black;
  background-color: #FFF;
  clear:right;
}

#nav a, #nav a:visited {
  color: #000;
  padding: 3px;
  font-size: 13px;
}

#nav a:hover {
  color: #940609;
}

#right {
  float: right;
  width: 180px;
  text-align: center;
  padding: 5px;
  background-color: #D6B569;
}

#right h3 {
	color: white;
	font-size: 20px;
	margin-top: -2px;
}

#right a, a:visited, {
	font-weight: bold;
	color: black;
}

#right p{
	font-size: 10px;
	margin-bottom: -5px;
}

#lineBacker {
  margin-left: 198px;
  background-color: #D6B569;
}

#content {
  background-color: #FFFFFF;
  padding: 15px;
  margin-right: 200px;
}

#content p, img{
	float: right;
}

#footer {
  width: 100%;
  border-top: 10px solid black;
  text-align: right;
  background-color: #940609;
 
}

#footer p {
  width: 700px;
  margin: 5px auto 20px auto;
  color: #FFFFFF;
}

#footer a, #footer a:visited {
  color: #FFFFFF;
}


/*
  INNER STYLES
*/


h1 {
  color: #940609;
  font-family: Times, Times New Roman, Garamond, serif;
  font-weight: normal;
  font-size: 28px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lilliput</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="lillicss.css"
</head>
<body>
<div id="container">
    <div id="menu">Menu
    </div>
    <div id="header">Header
    </div>
    
    <div id="wrapper">
        <div id="content">Main Content
        </div>
    </div>
    
    <div id="calendar">Calendar
    </div>
    
    <div id="pagetools">Page Tools
    </div>
    
    <div id="alertbox">Alertbox
    </div>
    
    <div id="footer"><p>Page Footer</p>
    </div>

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

html,body {
margin:0;
padding:0
}

body {
font: 76% arial,sans-serif
}

p {
margin:0 10px 10px
}

a {
display:block;
color: #981793;
padding:10px
}

#header {
height:20px;
margin:0;
background: #CC0000;
}

#content p {
line-height:1.4
}

#footer p {
margin:0;
padding:5px 10px
}

#wrapper {
float:left;
width:100%;
margin-left:-200px;
}

#content {
margin-left:200px;
}

#calendar {
float:right;
width:200px;
background:#000099;
}

#pagetools {
float:right;
clear:right;
background:#0000FF;
width:200px;
}

#alertbox {
float:right;
clear:right;
background:#6600FF;
width:200px;
}

#footer {
clear:both;
width:100%;
background: #336699;
color: #FFF;
margin-bottom 0px
}

#container {
width: 100%;
height: 100%;
}

#menu {
height:20px;
margin:0;
background:#CC6633;
}