#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] [Kill Stylesheets]

Columns

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

How to hide columns

  1. Remove the column you want to hide from the HTML source.
  2. 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!