Looking for Attractive Fluid CSS Examples

January 15, 2007 2:53 PM

Fluid CSS Filter: I am looking for examples of a two column Web page with a fluid main column on the left and a rigid width sidebar on the right. The examples need to look good (no simple CSS box diagrammed "how to's"). I want to show this to a client but I want the Web page to be attractively designed to enhance the point I'm trying to make (that this CSS solution is a good thing, natch).
posted by Taken Outtacontext to Computers & Internet (10 answers total)

You should try to check the screenalicious website. They have hundreds of screen shots and links to web designs. Most of them are css based.
posted by McSly at 3:32 PM on January 15, 2007

<selflink>My blog</selflink> is designed like that. I was dissatisfied with the default TypePad layout, so I rewired it.

(BTW, if you decide it's not "attractively designed", I'd be grateful for constructive criticism.)
posted by The Tensor at 3:48 PM on January 15, 2007

http://www.everything2.com

...though I'm not a fan of this type of layout
posted by ReiToei at 4:13 PM on January 15, 2007

The reason why you're not seeing a lot of recommendations is because it's hard to gracefully pair fluid-width and fixed-width columns side by side when you have to support a large range of current and legacy browsers. Commercial sites avoid designs that are prone to fail predictably.

Defining all columns in parallel with percentage widths is comparatively easy and foolproof, however.
posted by ardgedee at 4:59 PM on January 15, 2007

One problem with fluid layout + fixed-width sidebar is that it can cause line wraps on list elements (such as links to recent posts), making it unclear at a glance where each list element ends.

Defining all columns in parallel with percentage widths is comparatively easy and foolproof, however.

Or with ems, if you don't want, say, a sidebar much wider than it looks like it should be on higher resolutions.

Erm, and if Tensor's site fits what you need, wouldn't AskMe fit it as well (with the tag sidebar on the right)? Or were you looking only for ones which reserve the width of the sidebar all the way down the screen?
posted by Tuwa at 5:53 PM on January 15, 2007

Check around here:
http://csszengarden.com/
posted by zackola at 8:36 PM on January 15, 2007

Does this fix your problem?
http://www.alistapart.com/articles/negativemargins

FYI, I use this on my own website, 485i.com, to great success. And I've used it for quite a few clients. Also has the benefit of NOT being source-order dependent, and supports up to three columns defined semantically (not positionally). It's the best and clearest solution that I've seen. (I mean, some of my clients have to edit their own sites, so I try not to implement source code that's easily breakable or completely obfuscated)
posted by brianvan at 9:16 PM on January 15, 2007

Response by poster: Tensor, thanks for the link (I think self links are fine on Ask MeFi).

I suggested nicely designed sites sinc I'm showing this to a "visual" organization.

Thanks brianvan, I will check that out.
posted by Taken Outtacontext at 1:44 PM on January 16, 2007

Tensor, I read and love your blog!
posted by youarenothere at 4:39 PM on January 16, 2007

[blush]
posted by The Tensor at 1:17 AM on January 17, 2007