#col-a

Proin pharetra rhoncus metus. Pellentesque at nulla. Mauris ut nisl ac erat placerat lobortis. Nunc egestas ipsum eget arcu. Fusce eget diam sit amet quam rutrum condimentum. Quisque tortor mi, semper ac, facilisis ac, eleifend nec, wisi. Nunc fringilla cursus nunc. Curabitur varius ultricies dui. Integer nec lectus non mauris accumsan viverra. In rhoncus vestibulum felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam elit felis, vestibulum at, laoreet sed, vestibulum non, enim. Nunc eu diam. Nam velit. Duis nonummy bibendum purus. Praesent posuere, dolor ac dapibus mattis, turpis dolor ullamcorper justo, a laoreet wisi elit non metus.

Updates

2003/12/15
- Better support for IE and Mozilla through cleanup in layout.css
- Added annotations in Stylesheets
- Removed hack for Safari
- Created presentation.css and removed some presentation styles from layout.css
- Created elements.css for better separation of styles
- Dynamic property in ie.css explained and much more human readable
- Now using padding instead of borders for #columns, that allows to use background images

Style Sheets

[layout.css] [presentation.css] [elements.css] [ie.css] [Revive Stylesheets]

Columns

[Show all] [Hide left] [Hide right] [Hide both]

How to hide columns

Remove the column you want to hide from the HTML source.
Set the apropriate class (i.e. .hide-left) on the #main container.

That's it. You'll need a server-side script to achieve this (I'm using Zope). Or you can do this via JavaScript/DOM. I recommend quirksmode.org for more information on this topic.

Dom Tree

#main .show-all
Main container showing all columns.
- #header
  
  The header
- #columns
  
  Contains all columns
  - .cols-wrapper
    
    Helper wrapper for columns
    - .float-wrapper
      
      Wrapper for source ordered columns
      - #col-a
        
        Main column
        
        .main-content
        
        Main contents
      - #col-b .sidecol
        
        Left side column
        
        .box
        
        Box in a side column
    - #col-c .sidecol
      
      Right side column
      - .box
        
        Box in a side column
    - #em .clear
      
      Clearing dummy and for measuring 1em
- #footer .clear
  
  Clearing footer

Credits

Inspired by Big John's article about Source Ordered Cols and Douglas Livingstone's Full Height Columns.

Background pattern created by Alexander Mayrhofer, found at K10K.

Thanks to all!

#col-b

Donec massa. Etiam eleifend ullamcorper sapien. Aenean eu ipsum. Maecenas at tellus. Nulla consectetuer pellentesque est.

Integer ligula mauris, placerat at, malesuada vitae, convallis vel, dolor. Vestibulum ut eros quis lacus molestie blandit. Nulla facilisi. Fusce sed magna.

Features

Everything in EM (change your browser font size to see the effect)
Source ordered
Full height columns (or any column can be longest)
Switch between one two or three columns
Fluid center but fixed width side-columns
Min-max width for IE (experimental)

Tested with

Mozilla [1, 1.4]
Firebird [0.7]
IE/Win [5, 5.5, 6]
IE/Mac [5.2]
Safari [1]
Opera/Win [6, 7.11]
Netscape/Win [4]

Contact

Tonico Strasser, contact_tonico (at) yahoo (dot) de

#col-c

Cras ullamcorper, tortor eu consectetuer tincidunt, tellus pede sollicitudin eros, eu aliquam est tellus vel eros. In ligula pede, auctor ut, pharetra vitae, pulvinar ac, ipsum. Vestibulum fringilla sagittis risus. Curabitur fermentum, dolor at pharetra blandit, erat eros rhoncus mi, non gravida nisl lacus quis elit.

#header