CSS columns - more elements than columns

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.

It helps if you tell us what CSS you've found / tried so far, and be as specific as possible with your question (what particular problem you had, etc). — Jeroen, Aug 22 '12 at 17:06
I tried some classical approaches to column layout, similar to Xilexio answer. I also tried doing it through JS which works, but isn't a solution I'm looking for. — Matija Folnovic, Aug 23 '12 at 06:20

score 0 · Answer 1 · edited May 23 '17 at 11:49

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/.

that's what I thought. yes, a requirement is to work in any order. still, tnx for trying! — Matija Folnovic, Aug 23 '12 at 06:16

CSS columns - more elements than columns

1 Answers1