With this simple markup structure in place, you can apply a generic float rule to all three column divs.

Once dimensions are assigned to these blocks things rapidly change. First, start with the content block. To set the block to be 60% of the window width, and the width of the lefthand sidebar to be 20% of the screen.

#content { margin-left: 20%; width: 60%; }

By setting a lefthand margin equal to the width of your lefthand sidebar, you’ve essentially “reserved” some space for it. The next step is to use negative margins to “pull” the navigation div across the content div to the lefthand side of the page.

Creating Whitespace

The space between the columns is called a gutter. To customize this layout by increasing the size of the gutters, an approach would be to apply some margins around the columns. There are a number of ways to achieve this effect, but first start by adding an additional div to each of your columns, like so:

<div id="container"> <div id="content" class="column"> <div class="wrap"> [...] </div> </div><!-- /end #content --> <div id="navigation" class="column"> <div class="wrap"> [...] </div> </div><!-- /end #navigation --> <div id="related-info" class="column"> <div class="wrap"> [...] </div> </div><!-- /end #related-info --> </div><!-- /end #container -->

With your “wrap” divs in place, apply padding to them with CSS to create more breathing room:

.column .wrap { padding: 20px; } #content .wrap { padding: 20px 30px; }

Now simplify the CSS for a moment, and remove all the column margins:

#content { width: 60%; } #navigation { width: 20%; } #related-info { width: 19%; }

As a result, each column in your layout now appears in its natural position in the float order.


By adding a lefthand margin to your navigation div, and then by using a negative lefthand margin to move your related-info div, you can essentially reverse the order of the second two columns.

#content { width: 60%; } #sidnav { margin-left: 20%; width: 20%; } #related-info { margin-left: -39%; width: 19%; }

As a result, each column in your layout now appears in its natural position in the float order.


And to complete the demonstration, place the content column on the righthand side of the page by applying the following code:

#content { margin-left: 40%; width: 60%; } #sidnav { margin-left: -100%; width: 20%; } #related-info { margin-left: -80%; width: 19%; }

As with the first layout, a margin is applied to the content column in order to “reserve” some whitespace on the lefthand side of our page. Then, negative lefthand margins are used to pull the navigation and “related information” divs into the proper location.


Page Layout Algorithm

A simple way to calculate rearranging columns is to follow a somewhat simple algorithm used to calculate the negative margins for a column:

  • For the column you want to determine its negative margin, first calculate the rightmost point for all columns that precedes it in the source code.
  • Then specify the leftmost point for the column.
  • Finally, subtract the rightmost value from the leftmost to give the left margin for the element.

Faux Columns

Faux columns is a technique developed by web designer Dan Cederholm that utilizes a horizontally repeating background image.

By using one tiled image, Cederholm’s method works incredibly well in a fixed-width design: however, the technique’s versatility means that it needs only slight modification to work in our fully flexible layout. First, you need two images, one for each side of the content column

Next, you’ll need to wrap your container block in an extra div, like so:

<div id="container-outer">: <div id="container">: [Rest of template goes here] </div>: </div>:

And finally, you’ll need to add the following rules to your style sheet:

#container:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } #container { display: inline-block; } /*\*/ #container { display: block; } /**/ /*\*//*/ #container { display: inline-block; } /**/ #container-outer { background: url("images/cork_1.png") repeat-y 20% 0; } #container { background: url("images/grunge_wall.png") repeat-y 80% 0; }