Column Layout with variable height DIVs - 3-column example
Example of a multi-column DIV layout that will float left to right but also allow variable-height DIVs.
HTML
MUCH BETTER!
<div id="tbl1" class="wrapping-divs">
<div>1</div>
<div></div>
<div>2</div>
</div>
<div id="tbl2" class="wrapping-divs">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS
div > div {
background-color: lightgray;
width: 33%;
float: left;
border: 1px solid white;
box-sizing: border-box;
height: auto;
text-align: center;
}
/* Add some variable height items */
div > div:nth-child(1n+2) {
background-color: red;
height: a;
}
div.wrapping-divs > div:nth-child(3n+1) {
clear: left;
}