Any Order Columns

4.4 Variable Order and Use of Content Columns

Section 4.3 demonstrated several fundamental variations on the basic layout. Those all fulfilled the requirement that YAML's full functionality (including the use of the borders on #col3 to create column separators or backgrounds, see Section 4.6) remain intact.

This requirement is merely a design criterium and not absolutely necessary when developing a layout. With regards to a website's accessibility (for example, its display in text browsers), other criteria can be more important, which might even demand a different order of the column containers than that of the basic layout.

Many web designers prefer to place the content close to the beginning of the source code, and leave the less important elements such as the navigation or the sidebars for later. Though the necessity of this sorting is debatable, the discussion must be carried out elsewhere. Here, we will see how YAML can also fulfil this demand.

Note: the following CSS excerpts were taken from the sample layouts in the folder examples/03_layouts_3col/. You will find the corresponding basemod_xy.css files in the css/screen/ folder, which modifies the column order of the basic screen layout.

Important: the bugfix for the IE 3 Pixel Bug is built into the patch files of this layout sample, as its basic use can be demonstrated here with several different column orders.

Ordering Columns

The greatest design freedom can be had when the order of the column containers in the source code has no influence on their position on the screen. In this case, the web designer can place the content in the source code according to other demands (accessibility, search engine optimization, etc.) and has complete control over their screen and paper layout via the stylesheets.

As described in Section 4.3, the order of the columns in the source code cannot be changed at will. But it is also completely unnecessary.

The position and order of the columns on the screen is completely controlled via CSS. You must only insert your content at that point of the source code where we'd like it. Afterwards, the containers are arranged with CSS, and variously dependent upon the final medium.

For three columns with three various contents, there are exactly six possible combinations for their placement next to each other on the screen. These combinations are described and their limitations outlined in the following.

All these combinations use a three-column layout with proportions 25 | 50 | 25 percent. The positioning examples are in the examples/03_layouts_3col/ folder of the download package.

The most important characteristics have been summarized in this table for each possible column set.. The following legend explains the table's abbreviations:

Column Order 1-3-2 and 2-3-1

*) The use of graphic-free column separators and the fix for the 3 Pixel Bug via #col3 are mutually incompatible.

The column order 1-3-2 corresponds exactly to the standard definition, as anchored in the file base.css (see Section 3.4). I discussed voth variations while explaining the three-column layouts in Section 4.3.

/* #col1 becomes the left column | wird zur linken Spalte */
#col1 { width: 25%; }

/* #col2 becomes the right column | wird zur rechten Spalte */
#col2 { width: 25%; }

/* #col3 becomes the middle column | wird zur mittleren Spalte */
#col3 { margin-left: 25%; margin-right: 25%; }

03_layouts_3col/3col_1-3-2.html

To display the reverse order, 2-3-1, we needn't change the order of the columns in the source code -- merely change the float direction of the two columns in a basemod_xy.css file.

/* #col1 becomes the right column | wird zur rechten Spalte */
#col1 { float:right; width: 25%; }

/* #col2 becomes the left column | wird zur linken Spalte */
#col2 { float:left; width: 25%; }

/* #col3 becomes the middle column | wird zur mittleren Spalte */
#col3 { margin-left: 25%; margin-right: 25%; }

That's it. The screen would now show the order 2-3-1.

03_layouts_3col/3col_2-3-1.html

Column Order 1-2-3 and 3-2-1

The columns should display in either 1-2-3 from left to right, or in the opposite order, 3-2-1, in which they appear in the source code.

This presentation order is also simply manipulated. First, the two float columns must be placed next to each other. For that, both containers need only float in the same direction. So for the order 1-2-3, #col2 must float:left, and for the order 3-2-1, the container #col1 must float:right.

In the second step, #col3 is shoved to the left or right edge. This is easy enough with a margin on one side which is exactly as wide as the two columns #col1 and #col2 together.

For the column order 1-2-3, the containers are sorted from left to right.

/* #co11 becomes the left column | wird zur linken Spalte */
#col1 { width: 25%; margin: 0;}

/* #col2 becomes the middle column | wird zur mittleren Spalte */
#col2 { width: 50%; float:left; margin: 0;}

/* #col3 becomes the right column | wird zur rechten Spalte */
#col3 { margin-left: 75%; margin-right: 0%; }

03_layouts_3col/3col_1-2-3.html

For the column order 3-2-1, the containers are sorted from right to left.

/* #col1 becomes the right column | wird zur rechten Spalte */
#col1 { width: 25%; float:right; margin: 0;}

/* #col2 becomes the middle column | wird zur mittleren Spalte */
#col2 { width: 50%; margin: 0;}

/* #col3 becomes the left column | wird zur linken Spalten */
#col3 { margin-left: 0; margin-right: 75%; }

03_layouts_3col/3col_3-2-1.html

Column Order 2-1-3 and 3-1-2

The last two combinations let the first column in the source code order be placed in the middle on the screen. The previously described column order shows that when #col1 and #col2 have the same float direction, they appear in the same order onscreen as they do in the source code. We have to change that now.

At this point, we need to think outside of the box: other creative people have already wracked their brains over this issue and have found a wonderfully simple solution: negative margins. Alex Robinson uses this technique in the "any order columns" section of his article "In search of the One True Layout". By using negative margins, the two columns can be moved to precisely the position necessary. The same principle can be used on both YAML's float columns.

The first step ensures that both #col1 and #col2 float in the same direction: both are assigned float:left. Then needs a margin-left that's exactly as wide as #col2. #col1 is then already in its final position, and #col2 floats right up next to it -- but on its right, not yet on the left.

Now come the negative margins. Our reference point on #col2 is the top left corner. In order to move it to the left of #col1, it has to be moved to the left by its own width as well as the width of #col1. The resulting margin totals up to -75 percent. The final step moves #col3 to the right side by adding float:right property.

As all columns are floats now, we have to force #main to contain its floating children. This is done by adding float:left property.

/* containing floats in #main */
#main { width:100%; float:left; }

/* #col1 becomes middlle column */
#col1 { width: 50%; float:left; margin-left: 25%; }

/* #col2 becomes left column */
#col2 { width: 25%; float:left; margin-left: -75%; }

/* #col3 becomes right column */
#col3 {
  margin-left: -5px;
  margin-right: 0;
  float:right; width: 25%;
}

In this column order, the IE Doubled Float Margin Bug (see Section 2.13.5) would usually strike - literally doubling all margins and absolutely destroying this layout. But have no fear: the corresponding bugfix is already integrated in the file iehacks.css and incorporated into every YAML-based layout.

03_layouts_3col/3col_2-1-3.html

The procedure for the column order 3-1-2 is quite similar: just the float directions for #col1 and #col2 are switched out, the margins added together for the right side, and a different column gets the negative margin, as IE fails to comprehend a negative margin-right for #col2.

So #col1 must float:right, the same direction as #col2. Then #col1 is moved to the middle with a negative margin of the sum of its width and the width of #col2 (margin-left: -75%). To ensure that older versions of IE can still play along nicely, the margins for both sides are explicitly assigned for each column. Now that #col1 is in the middle of the page, #col2 floats up to the right. Last, #col3 lands on the left side and again, #main is forced to contain its floating children.

/*  containing floats in #main */
#main { width: 100%; float:left; }

/* #col1 becomes middle column */
#col1 { width: 50%; float:right; margin-left: -75%; margin-right:25%;}

/* #col1 becomes right column */
#col2 { width: 25%; float:right; margin-right: 0%;}

/* #col3 becomes left column */
#col3 {
  margin-left: 0;
  margin-right: -5px;
  float:left; width: 25%;
}

03_layouts_3col/3col_3-1-2.html

Column arrangement with negative margins works in all modern browsers. Alex Robinson points out that Netscape 6 & 7 and the older Opera 6 still have problems, but the current browser version Netscape 8.x did fine in our testing, and Opera 6 is, shall we say, antiquated.

The Upshot

YAML allows you to arrange your columns on the screen in any order, completely independent of their position in the source code.You alone decide which column will contain which content, navigation, or sidebar. The advantages and disadvantages of the various placement methods are easily compared with their relative usefulness.

Note: YAML with its print stylesheets offers an optional heading for the column containers for the print version. This can be useful when the linearized presentation is set to print the containers in a different order than they appear on the screen.

Section 4.5: Subtemplates