CSS vs. Tables - When Tables win

[Mario T. Lanza]

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
+-----------------------+
| | : | |
| LEFT | CTR | RIGHT |
| COL | COL | COL |
| | : | |
| | : | |
| 1 | 2 | 3 |
| | : | |
+-----------------------+
:................. 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

[Spartanicus]

ml****@lycos.com (Mario T. Lanza) wrote:

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.

Easy with CSS 2.0, it's just that IE's CSS support is relatively poor
that's causing trouble.

Loads of 3 column CSS layout examples out there (including examples
hacked to work in IE), Google is your friend.

--
Spartanicus

[Christoph Paeper]

Mario T. Lanza <ml****@lycos.com>:

I've been working on a 3-column layout where the center column is of a
fixed width (230px wide).
Hopefully only used for bitmap images.
I have been designing for Firefox and IE and routinely viewing the
results in both.
Fascist!!1
My original aspiration was to avoid tables.
And of course you had a look at the various sites that describe in detail
how other people tried to build layouts like yours and similar ones.

Assumed (pseudo) code following.
I positioned the center column first using "auto" left/right margins and
absolute positioning to achieve column centering.
#foo {
width: 230px;
margin: 0 auto;
position: absolute; top: 0; right: ?; bottom: 0; left: ?;
}

Why both?
I then positioned the left/right columns
(floating both left, 50% width on each)
.bar {
float: left; width: 50%;
}
over top of the absolutely positioned center column.
<body><.bar #bar1/><.bar #bar2/><#foo/></body>
By setting right padding and left padding
respectively on the left and right columns,
.bar1 {padding-right: 115px;}
.bar2 {padding-left: 115px;}
(Sorry I already trashed the CSS code!)
Why?
The trouble was with Firefox. The links shown in the
absolutely positioned middle column could not be clicked.
Of course not, if #bar1 and #bar2 are higher in stacking. You might had
been able to solve this with 'z-index', but I'm not sure.
This probably resulted from the overlapping left and right columns.
Indeed. Congratulations, most people don't think of that.
In the end, I converted this easily to a table-based layout which
works fine.
Depending on your mark-up, it would have been quite easy to fake a table
for Firefox and other browsers of similar capability, like so:

<body><.bar/><#foo/><.bar/></body>

html {display: table}
body {display: table-row}
.bar,
#foo {display: table-cell}

I'm not sure, but IIRC IE ignores all "display: table-*" like it should.
If that's not the case you would need to use some advanced selectors, that
IE doesn't support.
Of course it's not enough to test such a layout in just two browsers.
I wanted to avoid the table if only for better semantic
markup and faster display times on page loads.
Personally I think, a simple three-cell layout-table can be justified. The
Safari developpers put a page online, that sums the reason up quite well,
but I'm too lazy to search for it now. (They used a little more nonsense
mark-up than IMO necessary, though.)
Q1. Anyone ever created a three-column, pure CSS layout where the
center column is fixed and the left/right columns fluid
Probably, the real problems arise only with footers.
<http://css-discuss.incutio.com/?page=ThreeColumnLayouts> is a good
starting point for a search.

Does anyone know an interactive approach like
<http://webdesign.crissov.de/temp/3cols/interactive> with more options and
being better tested?
I can see why so may web designers prefect fixed-width layouts.
They're far easier to control.
Only that control is nothing a webdesigner has.
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?
Like shown, the various table values for the 'display' property can
*already* do that. Only in supporting browsers, of course.
Q3. Is there a suggestion box (email) to which I may send suggestions
to the W3C for consideration?

There's a mailing list (<ww*******@w3.org>) and its archive
(<http://lists.w3.org/Archives/Public/www-style/>), where you'll find a
number of mails wanting something like you do, mostly not knowing or
accepting "display: table-*", because IE doesn't support it (yet).

--
"A wise man gets more use from his enemies than a fool from his friends."
Baltasar Gracian