08/05/2005

Three Column CSS Design

I've been thinking about how to effect a three-column CSS layout that centers in the browser window and plays well with the major browsers both now and in the future. Currently, my DesignerJones site is built with fixed-position divs (z-index); it looks fine at 800×600, but any higher resolution finds it smack against the left side of the screen (except for the margin built into the design). And, the thing is, I like pretty much pixel-perfect rendition across browsers.

With a nod towards the Single Best Rule Noone Told Me thread at Cre8asite and to Adrian, who always makes me think, it's easy enough to get side-by-side divs to align properly. For this, I generally encase the divs in an overall div (especially since I tend to go with fixed-width) that gives us an outer container against wish we can position inner divs. A little margin:auto centers the outer div. Good enough.

But the problem with three-column layouts is that you'd think that you could float one right, one left, and let the one in the middle alone. This one can leave you thinking "good luck to me" in the middle of the night. You can start with glish.com's The Holy Grail — but here they've used fixed positioning; outer columns are fixed width while the middle column expands to fill the screen. Good, but that layout isn't always what one had in mind. A second Glish solution gives us three float:left columns, which again can get weird depending on browser width and browser version.

What I'm thinking is a tiny bit of a hack, but still far more elegant than cementing columns into tables or just letting browsers do whatever they may. Given that DesignerJones has content in the left column with two "navigation" columns to the right:

DesignerJones masthead

<div outer — fixed width, margin:auto>

<div content — fixed width, float:left> content </div>

<div nav container — fixed width, float:right>
<div left nav — fixed width, float:left> stuff</div>
<div right nav — fixed width, float:right> stuff</div>
</div>

</div>

I haven't tried this yet, but it *ought* to work.

Of course, the the text in the two right columns of DesignerJones starts higher on the "page" and actually overlays the one-piece top banner image via fixed positioning. Thus, to pull this one off, I'd have to cut the banner into three pieces, use the respective pieces as a background fixed at the top of the column, and then mess with padding in order not to have text run visually into the borders. While this may end up being easy, the idea gives me pause. Still, it will be worth it to be able to center DesignerJones, if I do it.

2 Comments to "Three Column CSS Design"

  1. Antonio says:

    I am facing huge truolbe and this post helped me alot, thx 4 tht. but I need some help u guys if u can do it. I made a card from ps6 and I use animation(gif) in one part in other part I use save as html after using slice tool to tag some pic in side my inage. everything came fine. and all browsers fine but when it taken to as outlook 2007 as stationary it brakes to 4 parts and can see tables and also see borders (white). funny bit is , there is no border , spacing or padding all = to 0. how can I fix this problem .

  2. Diane Vigil says:

    The display in email programs is not as advanced as with modern web browsers (and Outlook is not as advanced as some other email programs).

    What works great in browsers (floated divs, for example) generally does NOT work so well in Outlook. I would not use floats in emails, as they probably will not float.

    For emails, I suggest tables as containers, and putting sizes on the table and all td's, and border="0" if you don't want borders. Then see if it improves.

    We're talking 1999-style coding for emails. Sounds weird, but life is easier that way.

    Also, you may find that your animation does not display in Outlook. Unfortunately, that's the way it is. It *will* work in some other email programs, like Thunderbird.

    I just realized that you're talking about using the table as stationery in outlook. I haven't dealt with that, but try the tips above to see if that works for you.

Have your say ...

First-time comments will be held for moderation (but comments are appreciated). Otherwise, just be courteous. If your name is a bunch of keywords, your comment will be deleted. Don't post links unless highly pertinent. Posters must be 16 or older.

Manage your subscriptions

Archives
© 2004-2017 DianeV Web Design Studio. All Rights Reserved.
28 queries. 0.203 seconds.