[thelist] tables-to-CSS (was: no subject)

[Andrew Clover]

Dan Sundt <desundt at speakeasy.net> wrote:

> I am trying to construct the following layout: [...]
> Using only CSS, no tables...

The best way to approximate table layouts - and you do have to have
something like that if you want col2row2 and col3row2 to line up - is
to use left-float cell <div>s inside float-clearing row <div>s. eg.

  <div id="c1">Col1</div>
  <div class="row">
    <div class="cell">Col2 Row1</div>
    <div class="cell">Col3 Row1</div>
  </div>
  <div class="row">
    <div class="cell">Col2 Row2</div>
    <div class="cell">Col3 Row2</div>
  </div>

  #c1 { position: absolute; left: 0; width: 200px; }
  .row { margin-left: 200px; clear: left; }
  .cell { float: left; width: 50%; }

A few problems, however:

1. IE/Win rounds half-pixels upwards. If you have two floats at width 50%,
and the width of the space they have to fit in is an odd number of pixels,
say 101px, each float will be sized at 51px, so they won't both fit on
the same row! (Mozilla and Opera do the rounding later on so it isn't a
problem there.) A workaround is to add 'margin-right: -1px' to the
floating elements.

2. IE5.x/Win, and IE6 when it's not in Standards Mode, incorrectly calculates
the width of percentage-size floats relative to the body width, not the
parent width. Here's a possible workaround (same HTML as above) -

  body { margin: 0; padding: 0 0 0 200px; }
  #c1 { position: absolute; left: 0; top: 0; width: 200px; }
  .row { clear: left; }
  .cell { float: left; width: 50%; margin-right: -1px; }

have only tested this in IE6-Quirks but should work in IE5 too, probably.

As Mark said, you won't be able to size col1 to match the heights of the
other columns - CSS doesn't allow you to have an absolutely-positioned
element's height derived from its parent unless that parent has a preset
height. (Though, in practical terms, it does work in Mozilla.)

You could, however, put a wrapper div around the rows with a background on
the left-hand side, and position #c1 in front of it - it would look like the
background belonged to #c1 even though it was actually on another element.
This is sometimes useful.

Alternatively, you could give #c1 a 100% height which would be the same
height at the viewport. If the content in the rows was likely to be higher
than the window, though, scrolling would occur and #c1 would not be tall
enough. You could give it 'position: fixed' to stop it scrolling (doesn't
work in IE/Win but there's a script to fix that on my site), or put the
rows in a wrapper div that filled the window and had 'overflow: scroll'.
Or something.

Making CSS describe a mixture of fixed-size, window-size-dependent and
content-size-dependent measurements can be very tricky.

-- 
Andrew Clover
mailto:and at doxdesk.com
http://and.doxdesk.com/