saila.com </>
Widen your browser for extra content


  CSS Layouts


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



Source: Design & Usage </usage/>

A little over a year after this template started getting some public
attention, I?m tweaking it ever so slightly. Before ?officially?
releasing it, I?d like to get it tested
</attic/sandbox/saila_layout-v2.html>. Please report any problems
</about/feedback/> (including the browser and operating system). Thanks.

------------------------------------------------------------------------

With the advent of standard-compliant browsers like Internet Explorer
5+, Netscape 6.x, and Opera, Web developers began a concerted effort
<http://webstandards.org/upgrade/> 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 </usage/glossary/defn.shtml?liquid>*
    * and built *without tables* <cssvtables.shtml>

While CSS makes it relatively easy
<http://www.alistapart.com/stories/journey/> to create two-column
layouts, three-column ones like this site?s, remain difficult. As a
result, sites like glish.com <http://glish.com/css/>, BlueRobot
<http://www.bluerobot.com/web/layouts/>, and Owen Briggs?
<http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html> began
offering robust templates for public use (Al Sparber of PVII also has a
variety of templates that degrade nicely
<http://www.projectseven.com/whims/cssp_3box/3boxnoscript.htm>).

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 <#holygrail>,
    * all three columns are *fluid*
    * in most browsers, *none of the columns overlap*
    * and it actually works in the often problematic *Netscape 4*.x
      <http://www.mark.ac/web/cssnn4.php>,

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 <saila_layout.html>
explains how it works.

There are four versions to choose from:

    * |saila_layout-nn4.html| will work in all browsers from Netscape 4.x up
    * |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.
    * |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.
    * |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 <support.html>.

Back to top <#top>
saila.com </> · About </about/> | Feedback </about/feedback/> | Search
</search/> | Subscribe </about/subscribe.shtml> | Privacy </about/privacy/>
Copyright © 1996-2004, Craig Saila </resume/bio/>. All content on this
Web site is governed by a Creative Commons license
<http://creativecommons.org/licenses/by-nd-nc/1.0>, unless otherwise noted.
ISSN 1496-3035

More about CSS layouts:

    * CSS Layouts </usage/layouts/> (templates)
    * CSS Layouts for Netscape 4 </usage/layouts/nn4-layouts.shtml>
    * Tables or CSS? </usage/layouts/cssvtables.shtml>
    * Serving different style sheets to different browsers
      </usage/tips/different_css.shtml>
    * One page, many designs </usage/tips/alt_css.shtml>

Home </>

Design & Usage </usage/>

    * Steadfast Suggestions for Web Design </usage/design/>
    * CSS Layouts </usage/layouts/>
    * Using Colour on the Web </usage/colour/>
    * Web Building Tips </usage/tips/>
    * Show your attributes! </usage/attributes/>
    * HTML is not an acronym? </usage/acronym/>
    * Evaluating Magazine Web sites </journalism/webzines/>
    * The Condensed Net Glossary </usage/glossary/>
    * The Convergence Style Guide </usage/styleguide/>
    * Lorem Ipsum </usage/lorem/>
    * Web Design Resources </usage/resources/>

Web Journalism </journalism/>

    * Getting started </journalism/faq/>
    * Teaching online journalism </journalism/teaching/>
    * Crisis coverage in online news </journalism/wtc/>
    * Why end with 30? </journalism/thirty.shtml>
    * Getting a press pass </journalism/press_pass.shtml>
    * How to get a job </journalism/job.shtml>
    * A question of objectivity </journalism/objectivity.shtml>
    * Net's effect on journalism </journalism/technology.shtml>
    * Recommended Links </about/links/>
    * Essays </journalism/essays/>

Attic </attic/>

    * Sandbox </attic/sandbox/>
    * Limited Genealogy on the Saila Surname
      </people/family/genealogy.shtml>
    * Top 100 English-Canadian Books </attic/books/canbooks.shtml>
    * CBC?s Great Books Picks </attic/books/greatbooks.shtml>
    * Memorial to Allen Ginsberg </people/ginsberg.html>
    * Various Pictures </attic/pictures/>

Writings </articles/>

    * LCKY Blog </columns/lcky/>
    * Main Page Rants </columns/rants/>
    * Redesign 2003 </columns/redesign/>
    * Articles, Interviews, and Reviews </articles/index_features.shtml>
    * The Bytewriter </columns/bytewriter/>

------------------------------------------------------------------------

Search </search/index.shtml>

Search tips </search/index.shtml>

------------------------------------------------------------------------

Subscribe </about/subscribe.shtml>

Get updates by email

------------------------------------------------------------------------
Safer, Faster, Better [Firefox]
<http://www.spreadfirefox.com/community/?q=affiliates&id=3902&t=71>