iPhoneized

Matthew James Taylor has a put together an excellent example of a fluid, multi-column  css layouts that are iPhone compatible. These layouts use percentage widths and relative positioning and are ’stackable’ so you can use multiple column types on the one page.

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 Demos:

The Three Column “Holy Grail” Layout

The most common website layout is the three column design. The main page is in the center with a narrow column on either side. (link)

---

The Three Column “Blog Style” 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. (link)

---

The  Two Column “Left Menu” 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. (link)

---

The Two Column “Right Menu” Layout

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

---

The Two Column “Double Page” Layout

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

---

The Single Column “Full Page” Layout

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

---

The Multi-Column “Stacked” 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. (link)

---

For more details check out Matthew’s original post here.

---