Ultimate multi-column liquid layouts

by Matthew James Taylor on 20 January 2008

Ultimate multi-column liquid layouts (em and pixel widths)

My Perfect multi-column liquid layouts that use percentage widths have been very popular and many people have emailed me asking for versions using pixel and em widths, well they are finally finished. I have also included an additional 'blog style' design.

This series of layouts use pixel and em widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info:

The main features

  • No CSS hacks
  • iPhone & iPod Touch compatible
  • SEO friendly
  • Full length column background colours
  • No Images
  • No JavaScript
  • Resizable text compatible
  • Stackable columns
  • FREE for anyone to use

The layout demo pages

Overcoming cross-browser CSS issues

CSS can be tricky business particularly when you are trying to create complex liquid layouts for your websites (the hardest of all). To make matters worse, your design must work properly in a large number of browsers and operating systems. This can be a real headache because the numbers multiply out into dozens of combinations that need checking.

CSS hacks are bad

Because every browser has its own quirks, many people use hacks to overcome the little problems that arise. This has worked well 'til now but the number of browsers is growing and so too are the unexpected side effects of these hacks. In many instances a hack fixes a problem in one browser but creates a new bug in another. Also when a new version of a browser comes out, any bugs that are now fixed will still cause problems because the old hacks are trying to fix a problem that's not there anymore.

Only use cross-browser CSS

The solution is to keep things simple and only use CSS that works in all browsers. One of the main things to avoid is horizontal margins, padding and borders on elements with a specified width. This causes big problems for Internet Explorer because of it's broken box model. Unfortunately we can't simply ignore IE because it's the most widely used browser on the internet. If only everyone used Firefox!

If you like these layouts you may also be interested in my Floating boxes CSS layout.

Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor

Related articles