Saila CSS Layouts
A tableless, CSS-based, liquid, three-column layout
In June 2010, an update to these layouts was released, offering a more semantic template using HTML 5 and CSS 3. It is recommended these updated templates be used in place of the saila_layout-css2.html version mentioned here.
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:
saila_layout-nn4.htmlwill work in all browsers from Netscape 4.x upsaila_layout-ie5.htmlwill 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.saila_layout-ie6.htmlwill 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.saila_layout-css2.htmlwill work in all CSS-2–compliant browsers, such as the Gecko-based ones, and Opera version 5 and up.