saila.com

Web Design

Saila CSS Layouts

A tableless, CSS-based, liquid, three-column layout

With the advent of standard-compliant browsers like Internet Explorer 5+, Netscape 6.x, and Opera, Web developers began a concerted effort to develop valid Web pages using cascading style sheets instead of the traditional tables. The resulting pages page should be:

• considered valid HTML and CSS
• liquid
• and built without tables

While CSS makes it relatively easy to create two-column layouts, three-column ones like this site’s, remain difficult. As a result, sites like glish.com, BlueRobot, and Owen Briggs’ began offering robust templates for public use (Al Sparber of PVII also has a variety of templates that degrade nicely).

Now, saila.com is offering one as well. This template, based on the one used currently on one edition of this site:

• meets all of the above requirements,
• all three columns are fluid
• in most browsers, none of the columns overlap
• and it actually works in the often problematic Netscape 4.x,

Browsers in the fifth generation and higher will display all the templates, but some have been optimized with minor hacks to reproduce how the template behaves in CSS-2–compliant browsers. All templates validate, though.

An annotated version of the complete template explains how it works.

There are four versions to choose from:

1. saila_layout-nn4.html will work in all browsers from Netscape 4.x up
2. saila_layout-ie5.html will work in all Windows-based Internet Explorer browsers over version 4; the Macintosh version of Internet Explorer 5; all Gecko-based browsers; and Opera version 5 and up.
3. saila_layout-ie6.html will work in all Windows-based Internet Explorer browsers 6 and up; the Macintosh version of Internet Explorer 5; all Gecko-based browsers; as well as Opera version 5 and up.
4. saila_layout-css2.html will work in all CSS-2–compliant browsers, such as the Gecko-based ones, and Opera version 5 and up.

See the chart detailing browser support for the template.