Max-width and max-height constants?

[Wolf_22]

Does anyone know of any max-width & max-height constants for CSS as in a "general rule-of-thumb" to use?

For instance: everyone is basically familiar with the "design-by-0" method of development (referring to the margin:0, padding:0 declarations at the beginning of almost all stylesheets...).

Is there anything like this sort for a wrapper div or body?

Thanks,

[Raffles]

There is no general rule of thumb to use I don't think. A lot of websites have fixed widths of 800px (catering for people with 800x600 screens) but that's not so nice for people with very big screens. The best thing is to simply have a liquid layout, i.e. one that stretches with the screen. Max height is less relevant because everyone is used to scrolling vertically, it's scrolling sideways that's a pain in the ****.

I think more relevant is to have a min-width. If you resize a browser window down to a very small size in a liquid layout, elements can start overlapping each other or becoming difficult or impossible to read, which is when min-width can be useful. Sure, it means at some point the user has to start scrolling sideways, but it's better than looking at a layout that has got into a mess because the window is simply too thin.

[AutisticCuckoo]

Minimum width depends on your content. The more columns you have, the larger the minimum width needs to be.

Maximum width should ensure that lines of text don't become too long. How long is too long? That depends on things like the font and the leading (line height). A good rule-of-thumb that I use is a maximum width of 35em at a line height of 1.5. That's for the widest column, not for the entire page.

[Wolf_22]

The problem I'm running into is making the head (which is absolutely positioned) be at the top of the page while having everything at a fixed position (no scroll-bars regardless for an 800x600 res) while maintaining fluidity.

I'll try to post some sort of image of what it is I'm talking about soon...

[Wolf_22]

This is the design I'm trying to make: http://www.indstate.edu/sts/test/crn/prop1.jpg

I thought about breaking it up like this:

<div id="w">
 <div id="cL">
  <div id="c"></div>
  <div id="l"></div>
 </div><!--/cL-->
 <div id="cR">
  <div id="r"></div>
 </div><!--/cr-->
 <div id="f"></div>
 <div id="h"></div>
</div><!--/w-->

...I was going to make the "cL" float left, "cR" float right, and have the "h" be positioned absolutely in concordance to "w" being position:relative so that the "h" will have something to anchor to.

The problem I keep running into with this design is:

1.) Positioning it both vertically and horizontally centered...
2.) Making the design STICK to where it is (centered x & y axis) on the screen while allowing a fluid design by allowing the overall page to be resized (the center content area will be display:auto...
3.) Doing all of this while having a three-column layout as well as keeping content first...

I KNOW THIS CAN BE DONE, but what is it that I'm doing wrong? I've got it to a point now to where the "h" is basically centered in the above parameters, but I'm struggling with getting everything sized right (should I use px for the borders or em?).

Any input is very appreciative.