Webmaster Forum / HTML, CSS, Scripts / CSS / September 2004

Greetings,

I've been working on a 3-column layout where the center column is of a
fixed width (230px wide).  The center column must always be 230px and
the columns on the right/left (always the same size as eachother) must
always take up the remaining width of the browser.

I have been designing for Firefox and IE and routinely viewing the
results in both.

My original aspiration was to avoid tables.  I positioned the center
column first using "auto" left/right margins and absolute positioning
to achieve column centering.  I then positioned the left/right columns
(floating both left, 50% width on each) over top of the absolutely
positioned center column.  By setting right padding and left padding
respectively on the left and right columns, I was able to make the
inner text part away from the overlapped center column.  (Sorry I
already trashed the CSS code!)

Here's the interesting thing.  This worked as far as achieving the
desired layout.  The trouble was with Firefox.  The links shown in the
absolutely positioned middle column could not be clicked.  This
probably resulted from the overlapping left and right columns.  --
Imagine the browser is your stage and a column sits dead in the middle
of it.  Then imagine that the curtains draw closed so that seam
between them runs up and down exactly in the middle.  The curtains
prevent you from touching column behind them even though they are
transparent curtains!  (IE had no such issue.)

         PP PP           P=padding area applied to left/right columns
+-----------------------+

+-----------------------+
           :................. SEAM

In the end, I converted this easily to a table-based layout which
works fine.  I wanted to avoid the table if only for better semantic
markup and faster display times on page loads.

Q1. Anyone ever created a three-column, pure CSS layout where the
center column is fixed and the left/right columns fluid (thus filling
100% of the browser width)?  The edges of all columns must be
perfectly flush with each other.

I can see why so may web designers prefect fixed-width layouts.
They're far easier to control.  Fluid layouts aren't bad so long as
every column spanning the page with has a percentage width.  The real
issues that I had to design around involve the complexities with
combining indeterminate widths (based on percentages or ems) with
determinate ones (pixel based) and trying to get them to span 100% of
the width of any containing box.  These things can be creatively
achieved, but because of browser discrepancies they can be harry.
Tables make achieving this simple.  (When I set the table width to
100% and the center column to 230px, all browsers knew to distribute
the remaining width equally to the 2 remaining columns.)  ...this is
just one situation where I found tables a blessing.

Q2. Anyone know if the W3C is proposing any new standards for a future
release of the CSS spec that will better handle the issue of fitting
indeterminite and determinate width boxes into a container so that the
entire width is used up?

I have some ideas myself, that could really make this easy.

Q3. Is there a suggestion box (email) to which I may send suggestions
to the W3C for consideration?

Mario T. Lanza
Clarity Information Architecture, Inc.
2004.09