True pure CSS columns that won't be fuxed with by shat browsers

truecolumns.css

#container
	{
	width: 790px;
	}
#group_1-8
	{
	float: left;
	width: 630px;
	}
#group_9
	{
	float: left;
	width: 150px;
	margin-left: 10px;
	}
#group_1-5
	{
	float: left;
	width: 470px;
	margin-left: 160px;
	}
* html #group_1-5
	{
	display: inline;
	}
#block_1
	{
	float: left;
	width: 150px;
	margin-left: 160px;
	background-color: #ff0000;
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 150px;
	margin-left: -310px;
	background-color: #00ff00;
	}
#block_3
	{
	float: left;
	width: 150px;
	margin-left: 10px;
	background-color: #0000ff;
	}
#block_4
	{
	float: left;
	width: 230px;
	margin-left: 240px;
	background-color: #999900;
	}
* html #block_4
	{
	display: inline;
	}
#block_5
	{
	float: left;
	width: 230px;
	margin-left: -470px;
	background-color: #009999;
	}
#block_6
	{
	float: left;
	width: 150px;
	margin-left: -630px;
	background-color: #990099;
	}
#block_7
	{
	float: left;
	width: 310px;
	margin-left: 320px;
	background-color: #ffcc00;
	}
* html #block_7
	{
	display: inline;
	}
#block_8
	{
	float: left;
	width: 310px;
	margin-left: -630px;
	background-color: #ff6600;
	}
#block_9
	{
	float: left;
	width: 150px;
	margin-left: 10px;
	background-color: #660066;
	}
#group_4-5,
 #group_7-8
	{
	margin-top: 10px;
	}
/* Start Mac IE5 filter \*//* */
#block_1, #block_2, #block_3, #block_4, #block_5, #block_6,
 #block_7, #block_8, #block_9
	{
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	background-image: url(../images/backgrounds/rounded_TL.gif);
	background-repeat: no-repeat;
	}
/* End Mac IE5 filter */
@media all and (min-width: 0px) {
#block_1, #block_2, #block_3, #block_4, #block_5, #block_6,
 #block_7, #block_8, #block_9
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	/* mysterious 5 pixel shift - Opera I love you */
	margin-top: -5px;
	background-position: 0 5px;
	}
#block_1:before, #block_2:before, #block_3:before, #block_4:before, #block_5:before, #block_6:before,
 #block_7:before, #block_8:before, #block_9:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
.verticalalign
	{
	position: absolute;
	bottom: 0;
	height: 20px;
	background-image: url(../images/backgrounds/rounded_BL.gif);
	background-position: 0 100%;
	background-repeat: no-repeat;
	}
.wrapper .verticalalign
	{
	width: 150px;
	}
#block_4 .verticalalign, #block_5 .verticalalign
	{
	width: 230px;
	}
#block_7 .verticalalign, #block_8 .verticalalign
	{
	width: 310px;
	}
/* since we're using pixel widths we don't need to
do the usual 100% fix for old Operas or IE */
.verticalalign p
	{
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
	background-image: url(../images/backgrounds/rounded_BR.gif);
	background-position: 100% 100%;
	background-repeat: no-repeat;
	}
/* IE Win shifts these snaps upwards - at some font-sizes (sigh) */
* html #group_1-3 .verticalalign, * html #group_4-5 .verticalalign, 
* html #group_7-8 .verticalalign, * html #block_9 .verticalalign
	{
	bottom: -1px;
	}
/* IE Mac 5 makes a hash of the absolute positioning */
* html>body .verticalalign
	{
	position: static;
	width: 100% !important;
	}
* html>body .verticalalign p
	{
	position: static;
	float: right;
	}
.wrapper_extra
	{
	position: relative;
	}
/* IE 5.01 doesn't like this */
* html .wrapper
	{
	position/**/: relative;
	}
.wrapper
	{
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
	display: inline-block; /* Fixes nasty Opera7 scrolling bug */
	}
/* easy clearing */
.wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
.wrapper
	{
	display: inline-block;
	}
/*\*/
* html .wrapper
	{
/* only IE 5.01 should get this float value - otherwise 5.5 sometimes makes the width of wrapper too small */
	float: left;
	float/**/: none;
	}
.wrapper
	{
	display: block;
	}
/* end easy clearing */
.wrapper h2
	{
	z-index: 1000;
	margin: 0;
	padding: 10px;
	background-image: url(../images/backgrounds/rounded_TR.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	}
/* Firefox 1.0 doesn't like the pos:rel - cause text selection problems
see http://archivist.incutio.com/viewlist/css-discuss/64928 for details */
* html .wrapper h2
	{
	position: relative;
	}
.wrapper p
	{
	margin: 0;
	padding: 0 10px 10px 10px;
	}

truecolumns.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>True - Pure - won't be fuxed with by shat browsers - CSS Columns</title>
 	<link rel="stylesheet" href="truecolumns.css">
  </head>
  <body>
	<div id="container" class="wrapper_extra">
<div class="wrapper">
<div id="group_1-8">
<div class="wrapper_extra">
<div class="wrapper">
<div id="group_1-5">
<div id="group_1-3" class="wrapper_extra">
<div class="wrapper">
<div id="block_1">
<h1>block 1</h1>
<p>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</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>

<div class="verticalalign"> 
<p>VertAlign</p>
</div>
</div>
<div id="block_2">
	...
<div class="verticalalign"> ... </div>
</div>
<div id="block_3">
	...
<div class="verticalalign"> ... </div>
</div>
</div><!-- close div.wrapper -->
</div><!-- close div.wrapper_extra -->
<div id="group_4-5" class="wrapper_extra">
<div class="wrapper">
<div id="block_4">
	...
<div class="verticalalign"> ... </div>
</div>
<div id="block_5">
	...
<div class="verticalalign"> ... </div>
</div>
</div><!-- close div.wrapper -->
</div><!-- close div.wrapper_extra -->
</div><!-- close div#group_1-5 -->
<div id="block_6">
	...
<div class="verticalalign"> ... </div>
</div>
</div><!-- close div.wrapper -->
</div><!-- close div.wrapper_extra -->
<div id="group_7-8" class="wrapper_extra">
<div class="wrapper">
<div id="block_7">
	...
<div class="verticalalign"> ... </div>
</div>
<div id="block_8">
	...
<div class="verticalalign"> ... </div>
</div>
</div><!-- close div.wrapper -->
</div><!-- close div.wrapper_extra -->
</div><!-- close div#group_1-8 -->
<div id="block_9">
	...
<div class="verticalalign"> ... </div>
</div>
</div><!-- close div.wrapper -->
</div><!-- close div#container.wrapper_extra -->
  </body>
</html>