Perfect multi-column CSS layouts - iPhone compatible

Perfect multi-column CSS layouts. iPhone compatible.

The perfect three column liquid layout on my iPod Touch

This series of website layouts use percentage 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

Time for some demos...

3 Column (Holy Grail) Liquid Layout

The Perfect 3 Column Liquid Layout

The most common website layout is the three column design. It is also the most difficult one to get right. The main page is in the center with a narrow column on either side.

3 Column (Blog Style) Liquid Layout

The Perfect 3 Column Blog Style Liquid Layout

This layout is quite popular with bloggers. The main page comes first and then two columns are placed on the right of the page.

2 Column (Left Menu) Liquid Layout

The Perfect 2 Column Left Menu Liquid Layout

The two column layout is a simple clean design with a narrow left hand column that can be filled with a side menu and the main content page on the right.

2 Column (Right Menu) Liquid Layout

The Perfect 2 Column Right Menu Liquid Layout

This layout is exactly the same as the one above except with the side column on the right.

2 Column (Double Page) Liquid Layout

The Perfect 2 Column Double Page Liquid Layout

The double page liquid layout has two columns of equal width and is great for websites that read like a book.

1 Column (Full Page) Liquid Layout

The Perfect 1 Column Full Page Liquid Layout

Sometimes you may need to display some wide content like a large image, this layout has been designed specifically for this purpose.

Multi-Column Stacked Liquid Layout

The Perfect Multi-Column Stacked Liquid Layout

The power and flexibility of the above layouts is extended by stacking any number of them together in any order to create an unlimited number of designs.

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 a widely used browser on the internet. If only everyone used Firefox or chrome!

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

Updated: 27 Oct 2007

First published: 28 Oct 2007