eh, ovo me zaitrigiralo, pa sam ti sklepao jedno unobtrusive JS resenje (ako nema JS-a svi boxovi ce da budu floatovani na levo, as usual):
HTML kôd:
<!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=iso-8859-1">
<script type="text/javascript" src="jquery-latest.js"></script>
<style type="text/css">
#wrap { position:relative; width:400px }
#wrap div {
float:left;
width:49%;
border:1px solid red;
margin-bottom:5px;
}
#wrap div.colB {
float:right;
border:1px solid blue;
}
</style>
<script type="text/javascript">
/**
* Optimize vertical space for 2 column layout
* @author: Ivan Dilber (aka ivanhoe)
*/
$(function(){
var gHeightA=0, gHeightB = 0; // ovo je closure, nisu globalne promenjive
$('#wrap div').each( function() {
var box = $(this);
if(gHeightA > gHeightB)
gHeightB += box.addClass('colB').height();
else
gHeightA += box.height();
});
});
</script>
</head>
<body>
<div style="" id="wrap">
<!-- some random boxes -->
<div style="height:100px">1</div>
<div style="height:200px">2</div>
<div style="height:50px">3</div>
<div style="height:450px">4</div>
<div style="height:50px">5</div>
<div style="height:150px;">6</div>
<div style="height:50px">7</div>
<div style="height:100px">8</div>
</div>
</body>
</html>
koristio sam jQuery zbog lakoce i brzine rada, ali moze da se koristi bilo koja biblioteka koja ume da izracuna height() elementa.. borderi su naravno tu cisto da bih video da li se klase lepo dodeljuju..
EDIT: Sad sam isprobao na IE6, FF2 i Operi9 i lepo radi. Ajd nek neko pls. proba na Safariju, pa javite dal radi ?