How can I make the width of a page dynamic up to a certain limit?

Question

For example, dynamic and fluid between 600px - 1000px, but fixed at 1000px after 1000px and fixed at 600px below 600px. Check out digg.com for an example. I'd like a way that is cross-browser compatible. Thank you!

Answer 1

Use the min-width and max-width CSS properties.

body {
  min-width: 600px;
  max-width: 1000px;
}

IE6 doesn't support these properties, but newer versions (IE7+) do. All other major browsers support them.

Answer 2

CSS is the way to go! This is a no-brainer. Try using a class like:

.style { min-height: 600px; max-height: 1000px; }

Answer 3

here is the code i used in a elastic-width with limits site to get it to comply - even on ie6 (the width:expression line is there for ie6):

min-width: 900px;
 max-width: 1280px;
 text-align: left;
 width:expression(document.body.clientWidth < 990? "990px": "auto" );