I have used jquery and the animate call to set heights of divs, but you can set the animate speed to 0.
The example belows was for some mockups for quickly playing around with 2,3,5... block designs. The Jquery animate call is used to size the height of divs for main content, sidebar etc, ... but this may be a bit over the top for your requirement.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mock_2_ColGoldenRatio.aspx.cs" Inherits="ia._HtmlMocks.Mock_2_ColGoldenRatio" %>
<!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 runat="server">
<title></title>
<style type="text/css" >
/*normalise*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
font-size:100%;
font-style:normal ;
font-weight:normal;
border-collapse:collapse ;
border-spacing:0;
border:0;
border-width: 0px ;
text-align:left;
}
q:before,q:after
{
content:'';
}
/*center everything using html container*/
html{
text-align: center ;
}
/* wash with olive ; make body width max 976 px ; no margin ; relative position so other elements within */
body
{
background-color:Olive;
width:976px;
margin:0 auto ;
text-align: left ;
position: relative ;
}
#HeaderEnc
{
background-color : Maroon ;
}
#SearchEnc{
background-color: red ;
border-width: 0px ;
}
#MainBlogNav{
background-color:Yellow ;
}
/* postion relative to normal flow */
#ContentEnc{
background-color: Teal ;
position: relative ;
}
#ContentSideBarA
{
position: absolute ;
background-color: #AAA ;
left: 62% ;
width: 38% ;
}
#ContentMainEnc{
position: absolute ;
background-color: #888;
left: 0% ;
width: 62% ;
}
#ContentSideBarB{
position:absolute ;
background-color : #AAA ;
left: 0% ;
width: 0px ;
}
#FooterEnc{
position: absolute ;
background-color: blue ;
left: 0 ;
width: 100% ;
}
</style>
</head>
<body>
<div id="HeaderEnc">
The quick brown fo jumped over the lazy dog.
<br />
HeaderEnc
<div id="SearchEnc">SearchEnc</div>
<div id="MainBlogNav">MainBlogNav</div>
</div>
<div id="ContentEnc">
<div id="ContentMainEnc"><i>ContentMainEnc</i> :
<% Response.Write( GetContentBig()) ; %>
</div>
<div id="ContentSideBarA"><i>ContentSideBarA</i>
<% Response.Write( GetContentSmall()) ; %>
</div>
<div id="ContentSideBarB"><i>ContentSideBarB</i>
<% /*Response.Write( GetContentMedium()) ;*/ %>
</div>
<i>ContentEnc-Start</i>
<br />
<br />
<br />
<br />
<i>ContentEnc-Start</i>
</div>
<div id="FooterEnc" >FooterEnc</div>
</body>
</html>
<script src="../../Scripts/jquery-1.3/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../../Scripts/plugins/dimensions_1.2/jquery.dimensions.js" type="text/javascript" ></script>
<!--<script src="../../Scripts/Common/IaCommon.js" type="text/javascript" ></script>-->
<script type="text/javascript" >
/*
* ia.common 0.1.0
*
*/
var ia = {}
ia: "0.1.0";
// gets max settings from set of elements
var getBoundaries = function(elements) {
var maxHeight = 0;
var maxTop = 0;
var itemSelector = '';
var itemHeight = 0;
var itemPosition = {};
var itemTop = 0;
for (i = 0; i < elements.length; i++) {
itemSelector = elements[i]
itemHeight = $(itemSelector).height();
itemPosition = $(itemSelector).position();
itemTop = itemPosition.top;
maxHeight = itemHeight > maxHeight ? itemHeight : maxHeight;
maxTop = itemTop > maxTop ? itemTop : maxTop;
}
return { 'maxHeight': maxHeight, 'maxTop': maxTop };
}
// Rets truthy ; used by property get/set public fns
var SetIfOk = function(val) { return val; }
// IaPage class
var IaPage = function(objSpec) {
// override default page object with defaults from caller
var that = $.extend({
'speedFooterAnimate': 3000
, 'speedContentAnimate': 1000
}, objSpec || {});
// fn to move footer, ... to correct position : inmann clearing
that.arrangePageStructure = function() {
boundaries = getBoundaries(this.ContentElements);
$(this.FooterEncSelector[0]).animate({ 'top': boundaries.maxTop + boundaries.maxHeight }, this.speedContentAnimate);
$(this.ContentEncSelector[0]).animate({ 'height': boundaries.maxHeight }, this.speedFooterAnimate);
};
// Ret
return that;
}
var iaPage = IaPage(
{
'ContentEncSelector': ['#ContentEnc']
, 'FooterEncSelector': ['#FooterEnc']
, 'ContentElements': ['#ContentEnc', '#ContentSideBarA', '#ContentMainEnc', '#ContentSideBarB']
}
);
$(function() {
iaPage.arrangePageStructure();
}
);
</script>