3-Column Layout -- Without Columns

Question

How do you code a three-column layout in CSS when the source order jumps around from column to column?

The page has seven sections -- this fiddle shows how the required source order compares to the layout. The number is for its position in the source order and the text is where it should appear on the page.

http://jsfiddle.net/hpr2b/4/

As you can see, there are essentially three columns and three rows, but the elements in the second row shouldn't top-align and the second row shouldn't clear the first row. Each section should be flush with the bottom of the section that is located above it.

Notes:

• The source order matches the order that the elements need to appear on mobile devices and unfortunately cannot be changed

• I also don't have the option of duplicating sections in the markup and then showing/hiding them based on viewport width

• Absolute positioning is unfortunately not an option because the layout must adapt to any viewport width 320px and up

I've tried a number of well-known CSS layout techniques and the above fiddle shows the most successful attempt -- here is the code used for the "top row":

.top-center {
    float: left;
    width: 55%;
    margin-left: 25%;
}

.top-left {
    float: left;
    width: 25%;
    margin-left: -80%;
}

.top-right {
    float: right;
    width: 20%;
}

Here are the problems I'm encountering:

1. IE 9/10 is a complete mess (see below)

2. In Chrome, the "Middle Right" div always clears the "Top Left" div, preventing it from being positioned beneath "Top Right". Also, if the "Top Right" div becomes too tall, it overlaps "Middle Right".

3. In Firefox, the second "row" top aligns, overlapping the left and right sections of the first row.

Here is what it looks like in IE10:

And here it is in Firefox:

Answer 1

If the positioning is that important and you cannot control the (order of the) HTML code (I assume so from reading your question), I would rather go for having a somewhat usable absolute positioning using CSS, and refine it (onDomReady) using javascript (which gives you a lot more freedom to choose the best algorithm for the layout you need, but still a usable yet not perfect layout for those few anti-javascript-guys out there).

However, it is hard to tell without seeing the actual markup and requirements.