I'm working on some new themes for Community Server 2007 and wanted to get rid of the table-based layout used in the current default theme.  The problem with going from a table-based layout to a table-less layout is that all of the examples that I've seen lost one of the best features of tables -- the automatic readjustment of columns. 

For example, if I have a three column layout with columns for left-sidebar, content and right-sidebar, I'd like to be able to just not render the right-sidebar and have the content automatically adjust its width to fill the area that the right-sidebar would have occupied.

The table-less layouts that I've seen required that the width of sidebars be defined in more than one location:

  • The sidebar width and content margin
  • The content width and sidebar margin

This dependency between the sidebar and the content meant that I could no longer not render the sidebar container and have the main content automatically fill the extra space.  I had to also adjust the CSS of another element.  While this isn't a huge pain--I could have included a number-of-sidebars-versioned CSS file depending on how many sidebars I had--why add this extra step/complexity just for the perceived benefit of not using tables?

After spending a little time in Firefox, Swift, IE6, IE7, and Opera, I've come up with my own solution.  It uses a table-less layout and features:

  • No use of absolute or relative positioning
  • No use of hacks (well... just one to work around a positioning issue in IE6... but it's a very minor hack)
  • XHTML 1.0 strict compliance
  • Auto-adjusting content -- the content region fills whatever space is left by optionally rendered sidebars
  • Hiding of overflowing content in all layout regions
  • Support for fixed and variable page and sidebar widths

The mark-up is rather simple:

...
<div id="container">
  <div id="header">HEADER</div>
  <div id="navigation">NAVIGATION</div>
  <div id="sidebar-right">SIDEBAR A</div>
  <div id="sidebar-left">SIDEBAR B</div>
  <div id="content"><div id="content-inner">CONTENT</div></div>
  <div id="footer">FOOTER</div>
</div>
...

and it correctly supports removing one or both of the sidebars and having the content fill the blank space. 

The sample HTML file is attached to this post.  It includes the necessary CSS inline as well as comments on how to make width adjustments to the layout and sidebars.