Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us
Understanding "Any order columns"
The problem we are solving here is how to have three columns in the following order in the source document— main, nav, and links — but laid out in any order we want using CSS.
Our markup contains three divs, each with an appropriate id and content.
<div id="main">[...content ...]</div>
<div id="nav">[...content...]</div>
<div id="links">[...content...]</div>The first thing we are going to do is give them all a width and float them left, as well as fix a small floated elements bug found in Internet Explorer on Windows.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
}
#nav {
float:left;
width:20%;
}
#links {
float:left;
width:20%;
}
OK. This is our three column layout, but of course if we wanted to change the order of these columns, we would need to change the order in the markup.
The Solution
Firstly, let's swap the position of the main and nav columns so that the nav is on the left, and the main in the middle. It's as simple as giving the main column a left-margin of 20% to make room for the nav column, and then pulling the nav column into that position with a negative left-margin of -70%. Job done.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
margin-left:20%;
}
#nav {
float:left;
width:20%;
margin-left:-70%;
}
#links {
float:left;
width:20%;
}
Secondly, let's say we want to swap the nav and links column around. Well, the main column doesn't need to move so we'll leave that with its left-margin of 20%. Let's remove the negative left-margin from the nav column and pull the links column into that position with a negative left-margin of -90%.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
margin-left:20%;
}
#nav {
float:left;
width:20%;
}
#links {
float:left;
width:20%;
margin-left:-90%;
}
And there we have it. Getting the hang of it now? It's all really very simple and should give you the basis to experiment and start using this technique in your multi-column designs.
Bibliography
11 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Tim A. Callahan
: http://callahandesign.com/
22 May 2006, 19:11 : Permanent link to comment
Andy, this is a great article, straight to the point and explains Alex’s technique very well. I do believe Stu has used a similar method with a 3 col layout (over at cssplay.co.uk). Thanks for the read.
Mal
: http://www.yahoo.com.au/
22 May 2006, 19:14 : Permanent link to comment
It would be great if you could included some information about why one would order the columns as main, nav, links and not nav, main, links. I know why but other may not.
John Oxton
: johnoxton.co.uk
22 May 2006, 23:28 : Permanent link to comment
Really, that’s what the bibliography is for.
Lakshan
: http://laktek.web2media.net
23 May 2006, 01:57 : Permanent link to comment
Mal >> Average designer like me use any-order column to get content above navigation in the markup so the search engine spiders could crawl content easily, and when it comes to the presentation it’s always nice to treat nicely to your mobile users by presenting the navigation menu before content.
Andy may have a bite-sized more explanory answer than this.
Andy Hume
: http://usabletype.com
23 May 2006, 04:01 : Permanent link to comment
Lakshan’s pretty much hit the nail on the head. The point is that this allows you to further the concept of seperating content from presentation. You shouldn’t have to rely on a feature in your mark-up to present it in a certain way via CSS.
In practical terms, there are any number of reasons why you might not want to have presentation effecting your source order, not least the search engine and accessiblity reasons Lakshan mentions above.
Hope that clears things up for people who were wondering.
Chad
: http://www.chadodonnell.com
23 May 2006, 06:02 : Permanent link to comment
This looks great…except I’m seeing an few bugs in IE 6.
I put a background color on the columns for visual reference, and I notice that the which is given the negative margin still has an extra margin to it’s right side.
Also, any content within the negativly margined is cut off by the left side of the container. Any ideas?
Andy Hume
: http://thedredge.org
23 May 2006, 10:04 : Permanent link to comment
Hi Chad:
I haven’t looked in to your specific issues. I created examples that work cross-browser, and explain the simple points I wanted to bring across.
I’d recommend you take a look at the bibliography links, as there are many more issues surrounding the technique than what I’ve mentioned here. This is just bite size. ;)
Ray Cui
: http://www.melop.net
24 May 2006, 01:21 : Permanent link to comment
Great tutorial! The using of negative margins is kinda difficult for me to understand, I’ll check the references you provide, thanks!
John Oxton
: johnoxton.co.uk
24 May 2006, 07:13 : Permanent link to comment
Pimping my own stuff again but I have an article here which has some visual notes about negative margins that may/or may not be useful.
Matthew Pennell
: http://www.thewatchmakerproject.com/
24 May 2006, 23:21 : Permanent link to comment
And don’t forget, kids – using this technique will cause your site to fail to meet WCAG2 accessibility requirements if you believe one interpretation of the guidelines…
manuel
: http://ultimorender.com.ar/funkascript
25 May 2006, 08:31 : Permanent link to comment
maybe you can use bold to highlight the changes across the css snippets so that is easier to jump from the explanation to the css and back.