The ultimate multi-column CSS layout
Alex Robinson goes In search of the One True Layout and finds a technique that allows for fully flexible source order of columns, equal height columns, and vertical grids – all in the same layout. Despite a bug in the latest builds of the Gecko rendering engine powering browsers like Mozilla and Firefox, this is looking awesome.
- Previous post: Building better HTML forms
- Next post: Tips and techniques for mobile web design
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I have been playing with multi-column grid layouts recently. We have 3 columns pushing another section with 4 or 2 and it has just been fun figuring out. Oddly I had a simple layout that seems to work in all but its not percentage based -- yet. It is similar to what is posted there. Anyway, only public try at things is here:
http://www.uwaterloo.ca/media/billgates/
More complex ones should appear next week. The floating is fun.. and DW 8 renders these things nicely.
It might be just me, but the source code on some of the given examples gives me the creeps. Some of the techniques used are, each on itself, worth considering. Yet, in my opinion, such a thing as "One Layout That Rules Them All" just doesn't exist, if it is supposed to fit everyone it won't completely fit anyone.
Timely post me for Roger!
I've been struggling to add a minor feature to one of my layouts that works fine, but not quite how I want, so thanks :)
Just to offer alternative approaches as well, I want to share The ultimate guide to CSS-based column layouts I wrote some months ago.
Thanks, I have been thinking about this topic lately.. By the way, is there any problem to use this approach for a 3 column layout ?
div:float left, width:200px
div:float right, width:200px
div:middle, no float, expanding width
I mean except that the source order might not be the intended It works fine in FF and IE 6..
Sorry, comments are closed for this post.