CSS columns - more elements than columns - html

Question

I'm working on a layout with 2 columns. But, I'm having some issue with doing it, since my templates are quite complicated, and I'm unable to have one div per column.
For example, I might have something like:
<div class="column left">
left column - part 1
</div>
<div class="column right">
right column - part 1
</div>
<div class="column right">
right column - part 2
</div>
<div class="column left">
left column - part 2
</div>
And what I'd like to do is create two columns, with the same width and without empty holes (vertically) between them. Normally, it wouldn't be a problem to accomplish with:
<div class="column left">
left column - part 1
left column - part 2
</div>
<div class="column right">
right column - part 1
right column - part 2
</div>
Furthermore, my goal is to have a solution which works in dead browsers, like IE7. But, I'd also like to see solutions which are supported only in newer browsers, because I think there might be some interesting solutions. Of course, there are solutions through JS, e.g. merging elements of all .column.left in one div, and the same thing for .column.right, but CSS solutions would be better.

Answer 1

Is having the divs from different columns in none specific order a requirement? If so, then you can't accomplish it by pure css, because of the need to put some elements above the ones from another column. See Use CSS to reorder DIVs.
If that's not the issue, try writing all left column divs before right column divs in the code and use following css:
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
}
It creates a two-column layout. That method works particularly well when one of the columns if of contant width, but you can achieve whatever you want by changing 100px to for example 50%. Example here: http://jsfiddle.net/uQwUT/.