'Split Page' 3 column CSS liquid-layout

'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 centre column for basic navigation and some Google Ads.

The basic idea was that the centre 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 centre column had to come last in the source order.

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

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.

Published: 22 Jul 2008