Django and Flex

To lay out my pages I needed a mechanism for creating columnal layouts without tables, so I've used the common floating DIV trick:

<div>
  <div style="float: left; width: 180px">
    Column One Content
  </div>
  <div style="float: left; width: 500px">
    Column Two Content
  </div>
  <div style="float: left; width: 280px">
    Column Three Content
  </div>
</div>

(note that I'm doing these examples with fixed column widths in pixels. I normally prefer fixed-width in ems, but you could also use percentages for resizing. This approach doesn't allow you have some flexible size columns and others fixed width, however)

But column one (in many cases a navigation toolset) comes first. For SEO optimisation I want content to come first. This may be in a different column. In fact, I'd like to be able to put my column content into the HTML in any order, but have the layout work.

It turns out this is possible in most cases, by wrapping sets of columns in further div tags, and floating them as a whole. So, for example, if in a three column layout we want the middle column first in the HTML, then the right column, then the left, we'd do:

<div>
  <div style="float: right; width: 780px">
    <div style="float: left; width: 500px">
      Column Two Content
    </div>
    <div style="float: left; width: 280px">
      Column Three Content
    </div>
  </div>
  <div style="float: right; width: 180px">
    Column One Content
  </div>
</div>

In other words we group columns 2 and 3 together and right float the group, then add the leftmost column, also floating right. The logic is that a set of columns can be either left-to-right ordered (if each is floated left) or right-to-left ordered (if each is floated right). So with a combination of groups you can get most layouts.

Only most? Well yes. I wrote some software to calculate all possible permutations. For two columns you don't need to group at all, for three you can get all possible permutations this way. For four columns there are two permutations that are impossible. That number increases to 30 (out of 120) for five and by six, most (394 out of 720) orders are impossible. I would hazard a guess, however, that six columns isn't near the top of the average designer's toolbox.

So here's the meat. These tables show the order of columns on the left, and an abbreviated layout code on the right. The example from above is

2, 3, 1: (←2, ←3)→, 1→

We want the column two to appear first, then column three, then column one (hence 2,3,1 on the left). The code on the right tells us we need to put columns two and three, each floated left, into a div that is floated right, followed by column one on its own also floated right: exactly what we had in the HTML code above.

If you want the tables for higher numbers of columns let me know, and I'll email you them.