Jump to content

saila.com

Online media matters

Web Design

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:

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:

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.