I have made some progress with it but I cant get the inner DIVs to balance out, any suggestions please?
<!DOCTYPE html>
<head>
<title>COLUMN TEMPLATE</title>
<style type="text/css">
body, html{
margin:0px;
}
#css-table {
display: table;
}
#css-table .col1 {
display: table-cell;
width: 24%;
border: 1px dashed #CFCFCF;
padding: 10px;
background: #012345;
overflow:hidden;
}
#css-table .col2 {
display: table-cell;
width: 24%;
padding: 10px;
background: #012345;
border: 1px dashed #CFCFCF;
}
#css-table .col3 {
display: table-cell;
width: 48%;
padding: 10px;
background: #012345;
border: 1px dashed #CFCFCF;
}
#css-table .col1:hover {
background: #fff;
border: 1px solid #CFCFCF;
}
#css-table .col2:hover {
background: #fff;
border: 1px solid #CFCFCF;
}
#css-table .col3:hover {
background: #fff;
border: 1px solid #CFCFCF;
}
.homepagepopularsearchesrightinner {
width:47%;
padding-left: 1%;
}
.col1inner {
width:99%;
border: 1px solid #CFCFCF;
}
.col2inner {
width:99%;
border: 1px solid #CFCFCF;
}
.col3inner {
width:99%;
border: 1px solid #CFCFCF;
}
.homepagepopularinner {
width:99%;
padding-left: 1%;
border: 1px solid #CFCFCF;
}
.homepagepopularsearchesrightinner {
width:48%;
float:left;
padding-left: 1%;
border: 1px solid #CFCFCF;
}
.homepagepopularsearchesheader{
float:left;
width:95%;
font-size:130%;
font-family:Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<div class="content">
<div id="css-table">
<div class="col1">
<div class="col1inner"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna eu mi luctus varius. Etiam pulvinar, dui ut laoreet mollis, ligula erat rutrum mauris, vel ultricies lectus sem in sem. Etiam lacinia commodo lacus, a ultricies sem tristique aliquam. Sed non odio dui. Proin metus elit, facilisis et accumsan nec, volutpat eu dolor. Nam rhoncus magna ut lacus ultrices id sodales nunc auctor. In tincidunt adipiscing dui, ac consequat nisi hendrerit sit amet. Duis posuere elementum ligula, vel pharetra odio semper eu. Sed feugiat ipsum elementum nulla consectetur sed accumsan risus elementum. Suspendisse non nibh odio. Duis gravida ultrices condimentum. Nullam varius fermentum dolor, ut pellentesque ipsum commodo sed.
</p></div></div>
<div class="col2">
<div class="col2inner"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna eu mi luctus varius. Etiam pulvinar, dui ut laoreet mollis, ligula erat rutrum mauris, vel ultricies lectus sem in sem. Etiam lacinia commodo lacus, a ultricies sem tristique aliquam. Sed non odio dui. Proin metus elit, facilisis et accumsan nec, volutpat eu dolor. Nam rhoncus magna ut lacus ultrices id sodales nunc auctor. In tincidunt adipiscing dui, ac consequat nisi hendrerit sit amet. Duis posuere elementum ligula, vel pharetra odio semper eu. Sed feugiat ipsum elementum nulla consectetur sed accumsan risus elementum. Suspendisse non nibh odio. Duis gravida ultrices condimentum. Nullam varius fermentum dolor, ut pellentesque ipsum commodo sed.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna eu mi luctus varius. Etiam pulvinar, dui ut laoreet mollis, ligula erat rutrum mauris, vel ultricies lectus sem in sem. Etiam lacinia commodo lacus, a ultricies sem tristique aliquam. Sed non odio dui. Proin metus elit, facilisis et accumsan nec, volutpat eu dolor. Nam rhoncus magna ut lacus ultrices id sodales nunc auctor. In tincidunt adipiscing dui, ac consequat nisi hendrerit sit amet. Duis posuere elementum ligula, vel pharetra odio semper eu. Sed feugiat ipsum elementum nulla consectetur sed accumsan risus elementum. Suspendisse non nibh odio. Duis gravida ultrices condimentum. Nullam varius fermentum dolor, ut pellentesque ipsum commodo sed.
</p></div></div>
<div class="col3">
<div class="col3inner">
<div class="homepagepopularsearchesrightinner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna eu mi luctus varius. Etiam pulvinar, dui ut laoreet mollis, ligula erat rutrum mauris, vel ultricies lectus sem in sem. Etiam lacinia commodo lacus, a ultricies sem tristique aliquam. Sed non odio dui. Proin metus elit, facilisis et accumsan nec, volutpat eu dolor. Nam rhoncus magna ut lacus ultrices id sodales nunc auctor. In tincidunt adipiscing dui, ac consequat nisi hendrerit sit amet. Duis posuere elementum ligula, vel pharetra odio semper eu. Sed feugiat ipsum elementum nulla consectetur sed accumsan risus elementum. Suspendisse non nibh odio. Duis gravida ultrices condimentum. Nullam varius fermentum dolor, ut pellentesque ipsum commodo sed.
</div>
<div class="homepagepopularsearchesrightinner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget magna eu mi luctus varius. Etiam pulvinar, dui ut laoreet mollis, ligula erat rutrum mauris, vel ultricies lectus sem in sem. Etiam lacinia commodo lacus, a ultricies sem tristique aliquam. Sed non odio dui. Proin metus elit, facilisis et accumsan nec, volutpat eu dolor. Nam rhoncus magna ut lacus ultrices id sodales nunc auctor. In tincidunt adipiscing dui, ac consequat nisi hendrerit sit amet. Duis posuere elementum ligula, vel pharetra odio semper eu. Sed feugiat ipsum elementum nulla consectetur sed accumsan risus elementum. Suspendisse non nibh odio. Duis gravida ultrices condimentum. Nullam varius fermentum dolor, ut pellentesque ipsum commodo sed.
</div></div></div>
</div><!-- end of table -->
</div> <!--end of content div-->
</body>
</html>