Liquid CSS Layouts - Design Alternative to Table Based Websites

Step1 - Analysing the site's original layout

Original fixed table layout

This is how the site in question looked before CSS and liquid design was applied to it. The layout consists in a 1 row 2 column table in which resides the header image and the menu. Below, there is a single column table in which resides the content. Both tables have 749px in width (hence, fixed). The screen shot is taken at 1024x768 resolution. The layout fits perfectly at a 800x600 resolution while at lower resolutions an horizontal scroll bar is present and part of the layout is compromised. At resolutions higher than 1024x768 there is a lot of wasted space on both sides of the table.

Liquid CSS layouts tutorial structure





Back to Website Builder Tips: Making A Web Site Accessible


Other Accessible Web Design articles