Semi-Liquid Centered Layout

How to create a liquid layout suiteable for wide screens.

[pixelphantom]

Hi, I'm having some difficulty coming up with a layout for a website I'm working on. What I am trying to do is create a liquid layout to deal with 800x600 screen resolutions, but one that does not stretch across the entirety of a wide screen, rendering paragraphs into one line. I basically want to control how wide the layout can get. And while I'm at it, I'd like the whole thing centered.

What I've done so far is to use a wrapper div to center the descendants through "margin:0 auto" But when I apply the "max-width" attribute to the content box that I'd like to keep in check for wide screen, it essentially "cuts off" the right side of the box without recentering it. In other words, I have a box at the maxed out width aligned as though it were still the size it would be without the "max-width" attribute and therefore no longer centered.

Oddly enough, IE7 centeres a box with the max-width attribute just fine, Firefox doesn't.

Any tips on this?

[Tastatura]

Hi pixelphantom and welcome to WebmasterWorld! I am sure that mods will be here shortly to welcome you.
Take a look at CSS forum library [webmasterworld.com] for some examples of positioning layouts.

Also, 2, 3, Multi Column CSS Templates and Layouts [webmasterworld.com] might be of particular interest.

[edited by: Tastatura at 6:47 am (utc) on Dec. 21, 2006]