Collapsible 3-Column Layout

This is an example of taking one of the popular three-column CSS layouts from BlueRobot.com and adding a little javascript to enable collapsible left and right columns.

The purpose of this exercise is to utilize a proven CSS layout without modifying the original CSS or original html structure.

The xToolbar demo also makes use of this CSS layout.

Enjoy,
Mike Foster

updated: 12Jan07

Discussion

After several questions about this demo, and the related dockable nav technique, I will try to provide a few answers below. I'm glad this demo has been useful to you. Thanks for your comments and feedback.

Types of 'Dockable Navs'

Basically I've seen two different types of dockable navs:

  1. The element is not a part of the page layout (except when Javascript is disabled) and slides in on top of the visible page. In this technique the nav element is loosely bound to the HTML structure and so we have more freedom in implementing a generic Javascript solution that might also work with other page layouts.
  2. The element is part of the page layout and showing or hiding the element causes the remainder of the page to collapse or expand. In this technique the nav element is tightly bound to the HTML structure and so our Javascript solution will have to make assumptions about widths and margins for specific elements. This specific solution will not work with other page layouts. [altho... as I type this I'm getting ideas for ways to abstract this also ;-)]

These two are implemented very differently. Cross-Browser.com and SitePoint.com use technique #2, and this page illustrates the basic ideas behind that technique.

How This Page Works

The fundamental HTML structure for this page consists of any number of relatively positioned content elements (these make up the center column), followed by two absolutely positioned elements navAlpha and navBeta which make up the left and right columns.

  <body>
  
  <div class="content">
  ...main content block 1...
  </div>
  
  <div class="content">
  ...main content block n...
  </div>
  
  <div id="navAlpha">
  ...left column content...
  </div>
  
  <div id="navBeta">
  ...right column content...
  </div>
  
  </body>

These layout elements have their position and size specified with CSS. The content elements have width:auto and have left and right margins which provide enough space for the navAlpha and navBeta columns which are given specific widths corresponding to the content margins. The left and right columns are positioned absolutely in their respective top-left and top-right corners of the page. The width of the center column (the content elements) is determined by the inner width of the window minus the widths (and margins) of the left and right columns.

With Javascript we can cause the right column to not be rendered by setting its style.display property to 'none' (try it / undo it). Since navBeta is absolutely positioned it is not in the flow of HTML and when it is no longer rendered this has no effect on how the remaining elements are rendered. The content elements have a right margin which leaves enough space for navBeta - so in addition to setting navBeta's display to 'none' we must also adjust the content elements' right margin so they will expand to fill the empty space left by navBeta. And that's how this page works (toggle left and right columns).

Visit Cross-Browser.com and BlueRobot.com