Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 7 - Making the existing boxes expand

The easiest way to make boxes expand is replace width: 749px; (for the Content box) and width: 520px; (for the Header) with width: 100%; The layout will expand as below. Although the Header box has expanded you can't see the difference because we haven't yet created the illusion that it stretches.

Liquid CSS layouts tutorial structure

Introduction How to transform fixed table layouts to liquid CSS based layouts
1. Analysing the site's original layout
2. Identifying key areas
3. Analysing the source code of the original and final layout
4. Let's create the CSS layout
5. Let's reinclude some of the initial elements
6. Let's apply liquid design
7. Making the existing boxes expand
8. Creating an additional box for liquidity purposes
9. Left and right margins and other browsers
10. Final testing of liquid CSS design
11. Cross browser testing of CSS layout

Back to Website Builder Tips: Making A Web Site Accessible

Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 7 - Making the existing boxes expand

Liquid CSS layouts tutorial structure

Other Accessible Web Design articles