Balanced two column layout using CSS

Question

I have the following page:

http://community.mediabrowser.tv/topics?category_id=5&status=published (sample no longer as relevant since it contains a fix)

It is composed of a bunch of divs with the class section, which contain a ul of dynamic length (some are short and some long):

<div id='section'>
<ul>
  <li>an item</li>
  ....
</ul> 
</div> 

I would like to lay the divs out in 2 columns and have the columns balanced. I do not want any out of place gaps in either of the columns.

If you look at the original link, floating right (or left) and setting width does not do the trick.

Is there a pure css solution to this problem? Failing that, is there a javascript solution to this problem?

Answer 1

Purely css: the only way would be to position each div absolutely. I recently used a JQuery plugin called masonry which uses absolute positioning to achieve this effect.

Alternatively, you can use two divs with your sections divided between them:

<div id="left">
 [3 or 4 sections]
</div>
<div id="right">
 [3 or 4 sections]
</div>

Obviously though, this solution presupposes your sections can be approximately divided in half.