Three-paned pseudo-table layout with CSS

A while ago, Laura took on the redesign of one of our sites, http://www.ucoes.com. We thought we’d use a layout similar to the three-paned table layout of http://www.tedroche.com,
but I suggested she try it in CSS rather than with tables, separating
the style from the text and modernizing the page. Little did I know I
was asking for the nearly-unobtainable “Holy Grail” of web layout,
according to glish.com. With the help of that site, and some great pointers from “Creating Liquid Layouts with Negative Margins”
at A List Apart, and a lot of hard work on Laura’s part, she came up
with a site design that looks consistently good in IE (our 94% test
case), Mozilla (version 1.7 only, though), FireFox, Safari and Camino.
Unfortunately, the site is not so good in Opera, which seems to refuse
to load the background colors for the left and right panes.

Following her lead, I’ve started working on the same type of makeover
for the tedroche.com web site. It was only a few hours to get a similar
layout working in FireFox, my preferred browser, but another few hours
of tweaking to get the same look in IE, fiddling with the interplay of
margins, borders and padding, which each browser seems to interpret a
little differently. Of course, that layout then broke in FireFox.
Lather, rinse, repeat. I’ve almost got it down now. Hope to post a new
website early next week.

No comments yet.

Leave a Reply

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.