This example forms part of the Position is Everything article, In Search of the One True Layout.
<div id="container"> <div id="block_1_wrapper"> <div id="block_1"> ... </div> </div> <div id="block_2"> ... </div> <div id="block_3"> ... </div> </div>
#block_1_wrapper
{
float: left;
width: 100%;
}
#block_1
{
margin: 0 150px 0 250px;
}
#block_2
{
float: left;
margin-left: -150px;
width: 150px;
}
#block_3
{
float: left;
margin-left: -100%;
width: 250px;
}
/*--------------------------------------------------------
the rest is the same no matter what the column ordering
and plays no real part in the technique
---------------------------------------------------------*/
/* throat, er cough, float, clearer
the container div and the clearing rules have no bearing on the
technique - they're needed here on the footer's behalf
see http://www.positioniseverything.net/easyclearing.html for
an explanation of the voodoo applied to #container
Unfortunately neither of the other two easy clearing methods,
namely applying either a float or overflow: auto (or hidden) to
the containing wrapper works.
http://mezzoblue.com/archives/2005/03/03/clearance/
http://annevankesteren.nl/2005/03/clearing-floats
http://www.456bereastreet.com/lab/clearing_floats/
In both cases, the height of the containing wrapper is set to the
height of block_1. Great if block_1 is the tallest column, not so good
if it's not. (Though, of course, it should be noted that both
methods work just fine in IE because of its infamous broken float
implementation)
*/
#container:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{
display: inline-block;
}
/*\*/
* html #container
{
height: 1%;
}
#container
{
display: block;
}
/* */