mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Tech Stuff - CSS 3 Column Liquid Layout

The term du jour circa 2003, liquid layout, appears to have replaced with the term responsive design (2014) which, as we see it, is liquid design with a media query. Good to see the world is moving forward.

These notes describe our experiences converting from our old liquid nested table layout to our current (since mid 2003) bright shiny CSS three column liquid layout. HTML5 2013 Update: Updated prior to starting our HTML5 transition to document our change base-line. Hope triumphs over experience with HTML5 - again. This page checks out against the current (November 2013) W3C HTML5 validator with only one warning which says something to the effect of "this HTML5 may not be the final HTML5, it might not even be HTML5 and for that mater we're not even sure what HTML5 is this week". Sigh.

Note: We had originally moved to a table-based liquid design (whereby the page automatically adjusts to the users window-within-browser size) in 2001 due to a concern over the increasing range of video resolutions being offered. Though in those far-off days 1024 x 768 represented the pinnacle of expensive technology.

Well, it's not exactly crossing the Rubicon. But it was a great feeling. We had an relatively easy time converting our pages because we were able to avoid the most critical problems that many designers encounter since we are not a pixel-perfect site (though in 2004 we did a 5 layer, pixel perfect, CSS liquid layout). We've provided some notes to remind us what we had to do. If you find them useful - even as a 'what not to do guide' - then read on.

Design Requirement

We had the following design requirements:

First attempt - conclusions

The pages work and work well. But..

The Good

The Bad

The Ugly

As of April 2003 we started to migrate the site to our CSS controlled (a.k.a 'table-less') layouts. We have a resonable migration scheme (with some overheads) so we can take our time. The benefits are too great - at least on our site.

What we did and what we got

Our experimental page and this page were the initial results of our attempts at 'table-less' layout. We spent a couple of days reading the web based material (a lot for us) and decided to try a pure CSS based layout which was a radical decision in 2002 (2013 Update: Surprisingly still true today). Our site is not pixel-perfect, nor do we use wide borders so a few pixels here and there is fine by us. This means that we avoid the serious problems of MSIE 5.x (it counts all borders and padding as being inside the 'box' not outside as it is supposed to do). Serious stuff if you need 'no-gap' layouts.

Our decision to include NS 4.x also caused some problems - but surprisingly few once we made one draconian decision!

Here is what we did



Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

RSS Feed Icon

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

Icons made by Icomoon from www.flaticon.com is licensed by CC 3.0 BY
share page via facebook tweet this page

Page

email us Send to a friend feature print this page Display full width page Decrease font size Increase font size

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2024 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
hosted by javapipe.com
web-master at zytrax
Page modified: January 20 2022.