Pixel dimensions of the Split Page layout

Split Page 3 column layout dimensions

In this layout the center column width is in pixels and the left and right columns adjust in size to fill the rest of the screen. Vertical dimensions are left unset so they automatically stretch to the height of the content. Layouts that use pixel widths are great for images because you can make them fit perfectly within a column without gaps.

SEO friendly 1-3-2 column ordering

The higher up content is in your page code, the more important it is considered by search engine algorithms. To make your website as optimised as possible your main content must come before secondary content. This layout does exactly that: The left column comes first, then the right column and finally the narrow center column (see the nested div structure diagram for more info).

Equal height columns

It doesn't matter which column has the longest content, the background colour of all columns will stretch down to meet the footer. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns!

No Images

This layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML?

No JavaScript

JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.

The nested div structure

I've colour coded each div so it's easy to see:

3 Column 'Split Page' CSS Liquid-Layout

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colright is inside colmid. The left and right content columns each have their own wrapper div and are inside colright. The center column does not need a wrapper and it is the last div in colright. Notice that the left and right content columns come before the center column, this is great for SEO.

No CSS hacks

The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses pixel widths and clever relative positioning.

Valid XHTML strict markup

The HTML in this layout validates as XHTML 1.0 strict.

Resizable text compatible

This layout is fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. Apple have made resizing the text on a website simple with the pinch gesture on their multi-touch trackpad. So far this trackpad is only available on the MacBook Air but it will soon be rolled out to all of their systems. Is your website text-resizing compatible?

This layout is FREE for anyone to use

You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.

Google Ads compatible

This narrow center column is perfect for a tall Google Ad slot. If your main website content is on either side then users will be constantly looking across the center and are more likely to notice and click on the ads positioned here.

Full cross-browser support

The 3 column 'Split Page' liquid-layout has been tested on the following browsers:

iPhone & iPod Touch

  • Safari

Mac

  • Safari
  • Firefox
  • Opera 9.25

Windows

  • Firefox 1.5, 2 & 3
  • Safari
  • Opera 8.1 & 9
  • Explorer 5.5, 6 & 7