'Split Page' 3 column CSS liquid-layout

by Matthew James Taylor on 22 July 2008

'Split Page' 3 column CSS liquid-layout

A little while ago I was designing a website that had the main content split into a left and right column with a narrow center column for basic navigation and some Google Ads. The basic idea was that the center column is a fixed pixel width and the outside columns were to be fluid and stretch to equally fill the remainder of the page. In addition to this, each column was to have equal height background colours no matter which was the longest and the center column had to come last in the source ordering. Well it took me a while to do but I finally cracked it. This design is a lot like my Holy Grail liquid-layout only inverted.

The main features

  • No CSS hacks
  • Full cross-browser support
  • iPhone & iPod Touch compatible
  • SEO friendly
  • Full length column background colours
  • No Images
  • No JavaScript
  • Resizable text compatible
  • Google Ads compatible
  • FREE for anyone to use

View the layout demo

  • 'Split Page' 3 Column CSS Liquid-Layout

    'Split Page' 3 Column CSS Liquid-Layout

    An unusual web page design that is the inverse of the Holy Grail liquid-layout. This could have a number of interesting applications where a website's main content can be split into two equal columns.


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