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:

Advantages of CSS liquid design over other types of layouts

Drawbacks of the process

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.

Margins set in CSS

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.

Stack order of div boxes

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

Other Accessible Web Design articles