Example - In search of the One True Layout - Any Order Columns

Block 1

Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler

Filler

Last filler

Block 2

Filler

Last filler

Block 3

Filler

Last filler

This example forms part of the Position is Everything article, In Search of the One True Layout.

Block 3 not showing up in the right place? Please read this first before sending a report.

HTML Output

<div id="block_1">
	...
</div>
<div id="block_2">
	...
</div>
<div id="block_3">
	...
</div>

CSS Rules

#block_1
	{
	float: left;
	width: 34%;
	margin-left: 33%;
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 33%;
	margin-left: -67%;
	}
#block_3
	{
	float: left;
	width: 33%;
	}
#footer
	{
	clear: both;
	}
* html body
	{
	margin: 0;
	padding: 0;
	}
* html #footer
	{
	position: relative;
	}

Any Order Columns - Minimal Setup

Block 1

Block 2

Block 3

HTML Output

CSS Rules