Conservative CSS layout

avoiding a train wreck

[PeterD]

Up until now I'd been pretty lukewarm about changing from tables to CSS for layout, but I'm beginning to appreciate how clean and logical the CSS code can be. For one site, I'm thinking about switching to what seems to be a very conservative CSS layout. Here are the bare bones:

The styles would be something like:

#outer {width: 690px; text-align: left}
#head { some-font-and-color-styling}
#left {float: left; width: 175px; }
#main { margin-left: 225px }
#foot { clear: both; font-and-color-styling }

(I'm leaving out the padding and borders and such)

And the divs would be structured in this order:

outer
--head (line of text/links)
--left (a couple links and small images)
--main (mostly text)
--foot (line of text/links)

(i.e. head, left, main and foot divs are nested within outer)

With the CSS turned off, things look quite acceptable: I don't mind having the "head" and "left" content showing before the "main", since they're very short and it all flows logically. With the CSS on, there's enough slack in the margins to absorb any box-model problems. I'm not looking for pixel-perfect layout, I'm just trying to avoid a train-wreck.

It looks fine on IE6, Opera6, Safari and Lynx, but I don't have access other browsers at the moment. My question is, what browsers would have problems with this layout? Who would I be turning away? With my current table-based layout, about 1-2% of my pageviews seem to be from version 4 browsers.

[asquithea]

For the worst case, check with a Netscape 4.x browser. IIRC from a few years ago, IE4 made a much better job of CSS than NN4.

If you find you're having problems with those old browsers, put a little server side sniffer in to take / thin out the CSS. Write it carefully, though; Remember that excellent browsers like Mozilla Firefox can look superficially similar in the logs.

[zollerwagner]

I'd check in the latest version of Netscape. There are sometimes differences with it and the other browsers.

If IE 4 and Netscape 4 present your text adequately, that's enough, IMO. I sure wouldn't worry about what the layout looks like in those browsers.