Jump to content

saila.com

Online media matters

Web Design

Saila CSS layouts, revisited

The HTML 5 edition of this classic CSS-based, liquid, three-column layout

In early 2002, Web standard design was an exception and a number of people were working to change that. My little effort was to create a free CSS-based layout that worked in all browsers including, the browser with the worst support for CSS: Netscape 4.

In a testament to the Web standards themselves, all of those layouts still work, although only two are relevant anymore:

saila_layout-ie6.html
Supports Internet Explorer 6 and above, in addition to all modern browsers (Opera, Gecko-based browsers like Firefox, and Webkit-based browsers like Safari and Chrome).
saila_layout-css2.html
Works in all CSS-2.1–compliant browsers. Essentially, everything but IE6.

Ready for HTML 5

Given the traffic those original layouts still get, I thought it’d be worth updating the CSS2 version of the template. So I did. This new version is a bit more semantic and uses HTML 5 and the latest CSS:

saila_layout-html5.html
Uses semantic HTML 5 markup to support all browsers that support CSS 3 selectors (IE9+, Opera, Gecko-based browsers like Firefox, and Webkit-based browsers like Safari and Chrome). Has an alternate layout for displays narrower than 640 pixels. (There is also custom styles for IE7 and 8 included in the documentation .)

Keep in mind, this layout was first introduced in 2002 to push an agenda that has now become accepted in the mainstream Web design community. When designing CSS layouts, it’s best to let the design inform the CSS and markup, not the other way around.