Perfect liquid layout

Question

Could you please show me a website (preferably, a forum) that has perfect liquid layout (that does not break at all if the browser window gets resized)? Would be nice to see...

Once again, where on the web can I see a website that doesn't become a mess when squeezed down and doesn't cap its own width when enlarged?

Have you ever been concerned about that? Or a fat lot you care? 'Cause I see that popular websites (even portals, I am not going to name any) have this problem (as I consider it to be).

Well, I'd like to see what your code would be for an avatar on the left and some user's info on the right. Please see this picture to figure out what I mean: savepic.ru/780576.png

Answer 1

Well, Slashdot has a completely fluid middle column (down to some minimum which is pretty small) with fixed-width columns to left and right. As far as I can see it doesn't cap its width (tested on my 1900x1200 monitor).

It's not a forum on the main page, but the comments to articles are kind of like it. It doesn't have the avatar example you're looking for though :(

Answer 2

Smashing Magazine have a couple of posts on fluid layouts. Try searching around there to find good examples and explanations.

One of my favourite from their examples is Vivabit.

Personally I haven't been to concerned about it yet, but I probably should, with the rise of netbooks and mobile browsers. I still believe you should serve a different layout to mobile browsers, though, but it's interesting to look at possibilities of serving the same to all browsers.

Answer 3

The main reason why this is broken in many places is that it's broken at the fundamental level: CSS doesn't really support fluid layouts, there are still corner cases even when you start using tables for layout. On top of that, every browser and every version of every browser does CSS a little bit different.

The net result is that even highly paid web designers can't get it right (or someone would have come up with a solution by now and every would be using that).

The only hope is that browser developers finally agree to make their products compliant to the Acid3 test. But as I write this, my Firefox 3.5.1 gets only 92%. WebKit (Safari and Google Chrome) and Opera go the full 100% (see this article).

I personally have given up on this and I won't revisit this topic until IE 7 drops below 5% in the popular usage charts which will probably take five to ten years (IE 6 is dead as a log but still gets 12%).