Container Div wont stretch

[hp1]

Hi all, I realise this is a common topic but i cant find a solution that works for me. I have a 3 column layout but only the centre column will stretch the container <div>. If content in the right or left column is longer than the centre columns content its just pokes out of the bottom of the layout and looks really rubbish.I dont use floats for my positioning. Anyway my main index page code looks roughly like:

<div id="frame"><div id="header"></div><div id="navAlpha"><div id="update"></div></div> 		 <div class="content">Main content here	 	</div> <div id="navBeta"></div><div id="footer"></div> </div>

and my CSS:

body {	color:#EDEDED;	background-color:#302226;	margin:10px 100px;	padding:0px;	font:11px verdana, arial, helvetica, sans-serif;	height:500px;		}h1 {	margin:0px 0px 15px 0px;	padding:0px;	font-size:28px;	font-weight:900;	color:#ccc;	}h2 {	font:bold 12px/14px verdana, arial, helvetica, sans-serif;	margin:0px 0px 5px 0px;	padding:0px;	}p {	font:11px/20px verdana, arial, helvetica, sans-serif;	margin:0px 0px 16px 0px;	padding:0px;	}a {	color:#09c;	font-size:11px;	font-family:verdana, arial, helvetica, sans-serif;	font-weight:600;	text-decoration:none;	}input {	background-color:black;	color:white;	border:1px solid white;	}textarea {	background-color:black;	color:white;	border:1px solid white;		wrap:hard;	}a:link {color:#104E8B;}a:visited {color:#00B2EE;}/*a:hover {background-color:#eee;}*/	.content {	position:relative; 		min-width:300px;	/*height:475px;*/	margin:0px 210px 0px 150px;	padding:10px;	border-left:1px solid white;	border-right:1px solid white;	/*background-image:url(bridge2.gif);*/	z-index:0; 	}#navAlpha {	/*text-align:center;*/	color:white;	width:140px;	position:absolute;	top:95px;	left:101px;	/*border:1px solid red;*/	background-color:black;	padding:0px 0px 0px 0px;	margin:0px 0px 0px 0px;	z-index:3;	height:200px;	min-height:200px;}			#navBeta {	position:absolute;	width:190px;	top:103px;	right:120px;	/*border:1px dashed white;*/	background-color:black;	padding:0px;	float:right;	z-index:0;}  #header {	color:white;	margin:0px 0px 0px 0px;	padding:20px 0px 20px 20px;	height:40px;	border-bottom:solid white 1px;	background-image:url(header2.gif);	/*background-repeat:no-repeat;*/	background-position:center;	}	  #frame {	border:1px solid white;	background-color:black;	margin:0px;		}  #footer {	border-top:1px solid white;	/*border-left:1px solid white;	border-bottom:1px solid white;*/	background-color:black;	text-align:center;	margin;0px;	padding;0px;	}  #update {	   border-top:1px solid white;	   border-bottom:1px solid white;	   width:140px;	   margin:0px 0px 0px 0px;	   padding:10px 0px 10px 10px;	   }

Any advice appreciated becuase at the moment I have make sure the centre content column always has more in it than the two outer columns which is not really ideal. Hope there is a simple solution.Cheers experts!HP

[vchris]

I believe the problem is that your content and nav divs aren't all position absolute which causes them to appear below. One solution is to make them all position absolute (content and navs). Another one is to use floats.