what's the point of liquid layouts?

Hi all-
another question regarding CSS- everyone it touting how great CSS is because of the capability to have liquid layouts. Why is this so great?? It seems like most of the world is on smaller res monitors... right now my layout is liquid and looks fantastic at work (1024x768), but once I get it home or look at it on a laptop monitor, the layout looks like crap! The liquid-ness of it causes everything to start overlapping in order to display in that smaller res.

So, why is liquid so great? Just posing a question as this is my first round-about with CSS and so far I guess I'm not of the majority with this opinion!

-Tara

Liquid layouts have nothing to do with CSS. I can make a liquid site in all tables (although I'd cut my wrists soon after)

If your liquid layout looks like garbage on your smaller laptop, then you need to tighten up your design skills.

No doubt, liquid layouts are harder to get right on all the common resolutions, but once you do, you're pleasing a lot of people.

That's not exactly true.

Sure, the most basic liquid layout (no styling whatsoever) has nothing to do with CSS, but if you want to do any manipulation of the site you have to use CSS. If you use tables, it's not really a liquid site because table cells cannot flow underneath other cells which is what should happen in a true liquid layout.

thadley... as herkalees said, creating a functional, true, liquid layout is quite a challenge. There is a lot of compromise and sacrifice. Just keep at it and you'll start discovering all the answers to your questions.

If you have a lot of text then a liquid layout can be brilliant. I recently converted my site to a liquid layout.

It's really not that hard and there is an easy way of producing a 3 columns liquid layout here:
http://www.glish.com/css/7.asp

If you dont have any borders then you can dispense with the hacks - Id recommend that.

Ive also created a liquid template which can be used free of charge:
http://www.davereederdesign.com/work....com/index.htm

However, I still produce fixed width sites. Im working on one right now, the client doesn't want loads of text so it is the nicest way in this case

I would recommend thinking about using the max-width property when designing liquid layouts because often a site looks utterly crap in very high resolutions. Obviously, this does not apply to ALL layouts, but just some.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

Yes that is definately a good idea.

Small problem, IE doesn't support min-width, min-height, max-width or max-height!!

There are hacks that work well

Why use hacks?

You have to set boundaries or risk going insane trying to have perfection for all possibilities. Just make the site work and look nice within the 800 - 1280 width range and everything will be fine. If somebody has their browser even wider then they are, most likely, a computer savy person who knows their settings are going to affect browsing. It's easy for the savy to say "It looks horrible at 1,000,000x500,000" but that's just the way it is when you set a resolution so far beyond the standard. I honestly don't see the standard changing far from 1024, maybe 1280, but that's probably max. Even if a good percentage of people are set higher, browsing that wide just isn't comfortable for the average joe. And when you hit a certain resolution you have to adjust your OS icons and fonts to be larger or risk going blind trying to read 1/16" high text. So by adjusting the icons and fonts you end up back in proportion with 1024 or 1280. I have my res at 1280, but rarely browse maxed out. I'm usually within 800 - 1024 wide by full screen height and sometimes smaller if I have multiple browsers up.

Summary... 800 to 1024 range should look pretty good.. beyond that, do the best you can to salvage the layout, but don't frustrate yourself over it.

Its very easy to implement a min/max height hack, I wouldnt call it frustrating myself over it

I do, however, agree that people with 24" widescreens shouldnt expect a site to use all of their screen.

Anyother angle is - if a site is set to use 100% of the browser window then it should work on any device, PC or handheld which is a nice little bonus

I was speaking in a general concept of trying to get a fluid site to perfection in all resolutions and browsers, not just implementing one hack. It would take more then your one min/max height hack to make 90% of the sites on the internet function to perfection as css liquid layouts in all resolutions and browsers. My bet is you would indeed frustrate yourself attempting such a task.

I use a liquid layout for my site, using layers and css. However I am getting more savvy with CSS and I am slowly loosing code and tightening the site up thanks to CSS

Its a bugger somtimes and it can restrict ideas but its great to see your site fill most users screen - you would be pissed if you bought the Times paper and only half of it was printed on!!

www.visitdevonandcornwall.com (its not art mind)

Noone said all we had to do was implement one hack

Speaking about people with high resolutions, I know quite a few people with 1600*1200 type resolutions that browse in 1024*768. Just because someone has a higher resolution doesnt mean that they will browse in full screen.

Most mac users for instance. My browser only ever takes up about 60% of my screen at any given time.

That's one of the points I usually try to get through to those who set fixed widths beyond 760. Even people with 1024x768 don't always browse full screen. Everyone has different needs and fluid sites allow for everyones personal choices.