Liquid CSS Layouts - Design Alternative to Table Based Websites

How to transform fixed table layouts to liquid CSS based layouts

This article is a step by step case study showing you how to transform your table based web site to liquid CSS based layout. Although the site we're applying the css layout to is a very specific case, throughout the tutorial we will provide various solutions to be applied to your particular case.

Before reading please be aware that in order to fully understand this article you need to:

Have understanding of CSS (Cascading Style Sheets)
Have understanding of HTML
Be familiar to the liquid design concept
Understand the necessity of cross-browser testing
Have some basic knowledge of accessibility guidelines
Have the patience to go through the code and tweak it until the result is satisfactory

Advantages of CSS liquid design over other types of layouts

Decreases the HTML/body text ratio
Is completely flexible
Increases accessibility and usability of a site
Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
Looks as good if not better than table layouts once it's ready. The misconception that css layouts aren't as visually appealing as standard layouts has no argumentative base.

Drawbacks of the process

Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.

Key principles to CSS layouts

Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges. In this tutorial we will work with div boxes that act as holders for various elements.

The two most important things to remember are the margins one can set in relation to the edges of the page and the stack order of the div boxes.

The margins of can be set in such a way that a div box can be placed anywhere on the page. There is an illustration of the concept below. You can easily imagine how this box could be placed anywhere on the page. It is extremely useful because while visually they retain the position required by the design, in the source code, it can be placed anywhere.

The stack order of the div boxes allow overlapping or preventing it, if necessary, That way you can hide part of a div box and place something on top instead. Stack order translates to z-index number. Yes, it's that CSS command that everyone finds difficult to understand at first contact with CSS. Below there is an illustration that shows exactly how z-index works.

You can use your imagination to find countless ways to use the z-index and margin properties. The flexibility of CSS allows virtually any layout to be easily created.

Let's begin

Please bear in mind that all snapshots are in fact thumbnails. You can click on them to see the full image.

Liquid CSS layouts tutorial structure

Back to Website Builder Tips: Making A Web Site Accessible