Previous Message
Next Message

CSS puzzle: variable column layout

Sent by Johnson, Mark (NIH/NLM/NCBI) [C] on 20 March 2006 23:11

This should be simple, but I find nothing googling. Perhaps you can help?

I'd like a single CSS 1-, 2-, or 3- column layout, where the number of columns
depends on presence/absence of a div. I'd prefer liquid center,
and fixed-width left and right, and a footer that stretches
across the bottom.

So, the document

<div id="content">Howdy, skipper</div>

would have one column,

<div id="content">Howdy, skipper</div>
<div id="left">Left bar</div>

Would have two, as would

<div id="content">Howdy, skipper</div>
<div id="right">Right bar</div>


<div id="content">Howdy, skipper</div>
<div id="left">Left bar</div>
<div id="right">Right bar</div>

would have three.

I simply want right and left bars to come and go as they appear in the
source, and the content column to occupy any space that would be taken by
an absent bar.

 - Same-height columns (or pseudo)
 - Pure CSS, no JS.
 - Validates, CSS+HTML both. XHTML strict best, but don't care.
 - Prefer standards mode.
 - Preferably no hacks, though I don't care much.
 - Filters are fine.
 - Extra credit for old, broken browser support.
 - Headers and footers across the page.

One hacky solution is to let the content take up the entire
width of its container. Left or right sidebars, when they
appear, have embedded style that steals space from content:

<style type="text/css">
#left {
width: 200px;


<div id="left">
<style type="text/css">
#content {
margin-left: 200px;
Left content goes here

But that doesn't validate, and the content is messy. It works, but it's an ugly hack.

Can someone propose something clever and clean? Is this a long-solved problem?

Mark Johnson
Contract Systems Analyst/NCBI NLM NIH DHHS
Betheda, MD

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: