Ugh… tried to post earlier but my internet was giving me some weird issues; sorry for chiming in late.
The big draw back, regardless of browser compatibility is that you cant FLOW content in CSS ( tho I don’t think that what you were referring to) the other drawback is that you need to have some fixed dimensions on all elements.
Here is a quicky and compact version of how it can be done:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.cols{padding:0; margin:0; list-style: none; counter-reset: count; counter-reset: row;}
.cols li { height: 150px; width: 25%; border: 1px solid red }
.cols li:nth-child(4n+1) { counter-reset: row; counter-increment: count; }
.cols li:before { counter-increment: row; content:"COLUMN:"counter(count) " / ROW:"counter(row) ;display:block; font-weight:bold; }
/*da 'magic'*/
.cols li:nth-child(4n+5){color:red; margin-top: -608px}
.cols li:nth-child(4n)~li{margin-left: 25%;}
.cols li:nth-child(8n)~li{margin-left: 50%;}
.cols li:nth-child(12n)~li{margin-left: 75%;}
</style>
</head>
<body>
<ul class="cols" >
<li> col:1 this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
</ul>
</body>
</html>
The key concept is to think of each interval of elements as a column break and mark it so, beit with a class in the html or via nth-child.
here is a complex layout based on what I have just said a (col1 has 4 rows, col2 has 5, col3 has 2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.cols{padding:0; margin:0; list-style: none; height:600px; border:1px solid red}
.cols li{overflow:auto}
/*da 'magic'*/
.cols li { width: 25%; border-top: 1px solid red; height:25%; }
.cols li:nth-child(1), .cols li:nth-child(5), .cols li:nth-child(10) {border-top:none}
.cols li:nth-child(5), .cols li:nth-child(10){margin-top: -604px}
.cols li:nth-child(4)~li{margin-left: 25%;width: 50%;height:20%; border-left:1px solid red; }
.cols li:nth-child(9)~li{margin-left: 75%;width: 25%;height:50%;}
</style>
</head>
<body>
<ul class="cols" >
<li> col:1 this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
<li> you can use different methods for marking the column delimiter; for example for IE compatibility you can just add a class ot the specific elements, instead of using nth child or general sibling selectors </li>
<li>this would represent a div or content segment. It must be fix width and height, which is the chief drawback to this method. </li>
</ul>
</body>
</html>
So, the principle is to “mark” the element that starts a column. From that point you can use general sibling selectors to it up the height of the container, using negative margin and push it right ward the necessary amount. This concept (remember you can place a class as a marker, if you can’t support nth child) , should work as far back as IE8 (IE7 if you dont have html comments between the elements)
hope that helps