CSS - Creating A 'table' Like Layout Using Divs And No Specified Heights?

//====================================================================================================  ==
//  Create our bodyDiv which acts as our Title for the Intersection
//------------------------------------------------------------------------------------------------------					
bodyDiv = document.createElement('div');
bodyDiv.setAttribute('id', ("bodyDiv" + TempInt));
bodyDiv.style.width = 900;
bodyDiv.style.height = 400;
bodyDiv.style.margin = 0;
bodyDiv.style.padding = 0;
bodyDiv.style.position = 'relative';
bodyDiv.style.left = '0px'; 
bodyDiv.style.top = '0px';					
					
//====================================================================================================  ==
//  Append the Div to the HTML Document
//------------------------------------------------------------------------------------------------------
document.body.appendChild(bodyDiv);
					
titleDiv = document.createElement('div');
titleDiv.setAttribute('id', ("bodyDiv" + TempInt));
titleDiv.style.width = 900;
titleDiv.style.height = 5;
titleDiv.style.margin = 0;
titleDiv.style.padding = 0;
titleDiv.style.position = 'relative';
titleDiv.style.left = '0px'; 
titleDiv.style.top = '0px';
titleDiv.innerHTML = '<img src="http://www.suntransformer.com/peter/GoogleAPI3/test/bckgrnd.png"><h5>Intersection: ' + TempInt + '</h5>';
					
bodyDiv.appendChild(titleDiv);
					
//====================================================================================================  ==
//  Create the timelineDiv which holds our TimeLine chart
//------------------------------------------------------------------------------------------------------					
timelineDiv = document.createElement('div');
timelineDiv.setAttribute('id', TempInt);
timelineDiv.style.width = 350;
timelineDiv.style.height = 275;
timelineDiv.style.margin = 0;
timelineDiv.style.padding = 0;
timelineDiv.style.position = 'relative';
timelineDiv.style.left = '0px'; 
timelineDiv.style.top = '0px';
					
//====================================================================================================  ==
//  Append the Div to the bodyDiv
//------------------------------------------------------------------------------------------------------
bodyDiv.appendChild(timelineDiv);
					
//====================================================================================================  ==
//  Create the pieDiv which holds our Pie Chart
//------------------------------------------------------------------------------------------------------
var pieDivID = "Pie" + TempInt;

pieDiv = document.createElement('div');
pieDiv.setAttribute('id', pieDivID);
pieDiv.style.width = 500;
pieDiv.style.height = 300;
pieDiv.style.margin = 0;
pieDiv.style.padding = 0;
pieDiv.style.position = 'relative';
pieDiv.style.left = '0px'; 
pieDiv.style.top = '0px';
					
pieDiv.innerHTML = '<img src="http://www.suntransformer.com/peter/GoogleAPI3/test/bckvert.png">';
					
//====================================================================================================  ==
//  Append the pieDiv to the bodyDiv
//------------------------------------------------------------------------------------------------------
bodyDiv.appendChild(pieDiv);

                        	<div class="friendlisting">
                                <a href="#"><img src=".jpg" alt="xxxx" class="profile" /></a>
                                <div class="fullname"><a href="#">George Lexington</a></div>
                                <div class="hometown">Bruges, Belgium</div>
                                <div class="commonfriends">13 common friends</div>
                                <div class="addtofriends"><img src="images/icons/user_add.png" />Add to friend list</div>
                                <div class="sendmessage"><img src="images/icons/email_edit.png" />Send Message</div>                             
                            </div>

#content .friendlisting { min-height:40px; padding:5px; border-bottom:1px solid #DDD; }
#content .friendlisting img.profile { width:100px;  }
#content .friendlisting .fullname { width: 100px; margin:10px; }
#content .friendlisting .hometown { width: 100px; color:#CCC; margin:10px; }
#content .friendlisting .commonfriends { width:100px; height:100%; background:#ffe996; } 
#content .friendlisting .commonfriends:hover { background:#FEDF62; } 

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<table cellspacing="0" cellpadding="0" border="0" width="760" height="100%">
<tr height="420">
	<td width="600"></td>
	<td width="160" bgcolor="green"></td>
</tr>
<tr>
	<td width="600"></td>
	<td width="160" bgcolor="yellow" valign="bottom">This text is aligned to the bottom of the window, and 

moves up with the bottom of the window but only as far as the green block.</td>
</tr>
<tr height="20">
	<td width="600"></td>
	<td width="160" bgcolor="yellow"></td>
</tr>
</table>

<div class="menucolumn">

<!-- some content in my left hand column -->

</div>
<div class="maincolumn">

<!-- some content in my right hand column -->

</div>

div.menucolumn{
	float: left;
	width: 200px;
	margin-top: 20px;
}

div.maincolumn{
	margin-left: 205px; 
	padding-left: 5px; 
	border-left: 1px solid #222222;
}

<span class=\"formlabel\">Use MySQL (yes or no):</span>
<input type=\"text\" name=\"usemysql\" class=\"formfield\">

.formlabel, .formfield{
	color: #222222;
	text-decoration: none;
	font-color: #222222;
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;

	display: block;
	width: 300px;
	float: left;
	margin-top: 5px;
}

.formlabel{
	text-align: left;
	width: 300px;
}

<div style="position: absolute; top: 0px; left: 0px; width: 260px;">
<a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div>
<div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;">&nbsp;</div>

<div class="sidebar">
  <div class="cv">
    <font size="3"><b><center>
      Current Version Info
    </center></b></font>
  </div>

  <div class="ver">
    <center>
      Version:
      <br/>
      <b>0.0.0</b>
    </center>
  </div>

  <div class="rel">
    <center>
      Released:
      <br/>
      <b>00/00/00</b>
    </center>
  </div>

  <div class="nav">
  </div>
</div>

<div class="main">
  <center>
  Lorum ipsum
  </center>
</div>

div.sidebar {
    width: 202px;
    float: left;
    border: 0px solid #00CC99;
}

div.cv {
    width: 200px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33)
}

div.ver {
    width: 99px;
    border: 1px solid #00CC99;
    float: left;
    background-color: rgb(33,33,33)
}

div.rel {
    width: 99px;
    border: 1px solid #00CC99;
    float: right;
    background-color: rgb(33,33,33)
}

div.nav {
    margin-top: 30px;
    width: 200px;
    height: 100px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33)
}

div.main {
    width: 500px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33);
    float: right;
}

......
<body>
<div id="all">
<div id="head">
Head Section
</div>
<div id="main">
Bar


<div id="content">Content Goes Here</div>

</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

body    {
        background-color:#ff0000;
        }

#head   {
        height:200px;
        }
        
#all   {
        margin-left:3%;
        margin-right:3%;
        background-color:#a0a0a0;
        
        }

#main   {
        background-color:#ff00ff;
        
        }

#side_bar{
        background-color:#99ff99;
        }

#content{
        position:relative;
        float:right;
        width:80%;
        right:10px;
        background-color:#ffffff;
        padding:5px;
        }

#footer {
        height:200px;
        }

<html>  <head> <!--[if IE]> <style type="text/css">  #container div {display:inline;}  #ul_top li {display:inline;}  #header p {display:inline;}  #main_content div {display:inline;}  #recreation div {display:inline;}  </style> <![endif]-->   <style type="text/css">  body {padding:0px;       margin: 20px 0px 0px 20px;      }   h1 {color:#990D0D;     font-size: 20px;     text-indent: 40px}  		#limiter {width: 1003px; }  #ul_top {margin:0px; text-align:right; 	}  #ul_top li {display:inline-block; zoom:1; 	    padding: 0px 5px 0px 0px;  	     	   }  #ul_top li a {color:#000;  	      text-decoration:none; 	      font: veranda; 	      font-size: 11px; 	     }  #ul_top li a:hover {color:#DE6800;  	      	    text-decoration: none; 	      	    font: veranda; 	      	    font-size: 11px; 	     }   #container {border: solid #000 1px;  	    background: #FFF url('background.jpg'); 	    text-align:left; 	    width: 1000px; height: 750px; 	   }   #header {width:1000px; height:303px; 	 background:#yellow url('red_rock_header.jpg') no-repeat; 	} #header p {display:inline-block; zoom:1; 	   font-size: 20px; 	  }  p.company_name:first-letter { color:#990D0D;  			      font-size:40px; 			    }    #main_content div {display:inline-block; vertical-align:top; zoom:1;}  #recreation {width:430px;}  #recreation div {display:inline-block; vertical-align:top; zoom:1;}   #text_holder{ border-right: dashed black 1px; 	      padding:15px; 	      width: 375px;}    a.rec_links {color:#DE6800; 	     font-size: 18px; 	    }   a.rec_links:hover {color:#000; 	     	   font-size: 18px; 	    	  }  a.pic_links { display:block; 	      position: relative; 	      width: 200px; height: 160px; 	     }  #climbing {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('climbing.jpg') no-repeat; 	    	  }    #bicycling {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('bicycling.jpg') no-repeat; 	    	  }   #hiking {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('hiking.jpg') no-repeat; 	    	  }   #wildlife {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('wildlife.jpg') no-repeat; 	    	  }    p.discription {font-size: 12px; 	       text-indent: 20px; 	       }   </style> </head>  <body>   <div id="limiter">  	<ul id="ul_top">  	<li><a class="mini_link" href="#">Contact us</a></li> 	<li><a class="mini_link" href="#">Area Map</a></li> 	<li><a class="mini_link" href="#">About us</a></li> 	</ul>  <div id="container"> <div id="header"> 	<p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> 	  </div>	  <div id="main_content">  <div id="text_holder">  	<h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p>  </div>  <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div>    <div id="recreation">   	<div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> 	<div id="climbing"> 	 		<a href="#" class="pic_links"></a> 		 	</div> 	</div> 	  	<div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> 	<div id="bicycling"> 	 		<a href="#" class="pic_links"></a>		 	 	</div> 	</div>    	<div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> 	<div id="hiking">  		<a href="#" class="pic_links"></a>  	</div> 	</div>  	<div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> 	<div id="wildlife">  		<a href="#" class="pic_links"></a> 	 	</div> 	</div>  </div>  </div>	   </div>    </body> </html>

Example 1:        Example2:
*blah               *blah
*blah               *blah
*blah               *blah