www.tuljo.com

Three Fluid Columns

Sample of three fluid columns

Left and right colums may be set to fix width. It is adviceable to have the both colums declared the same way, either px or %. If side columns are defined in different units, then at VERY narrow window one column gets pushed down. The last may be or not to be an issue.

Code

<div class="outer">
	<div class="leftcol">
		<p>Left col fix</p>
	</div>
	<div class="rightcol">
		<p>Right col is flexible flex</p>
	</div>
	<div class="middlecol">
		<div class="inner">
			<p>This is a flex middlecol</p>
		</div>
	</div>
</div>

CSS

.outer{
	float:left;
	width:88%;
}
.leftcol{
	float:left;
	width:111px;
}
.middlecol{
	float:none;
	overflow:auto;
	width:auto;
}
* html .middlecol{
	float:left
}
* html .middlecol .inner{
	width:100%;
}
.rightcol{
	float:right;
	position:relative;
	width:33%;
}

Source origin: http://pmob.co.uk/pob/three-columns-fluid.htm

2008

Web Development - XHTML CSS JavaScript jQuery.