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).
<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
(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
...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
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
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
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
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
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
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
posted by youarenothere at 4:39 PM on January 16, 2007
[blush]
posted by The Tensor at 1:17 AM on January 17, 2007
posted by The Tensor at 1:17 AM on January 17, 2007
This thread is closed to new comments.
posted by McSly at 3:32 PM on January 15, 2007