Min-Width Max-Width

Forum Moderators: not2easy

Message Too Old, No Replies

Min-Width Max-Width

Setting a max width for page display

Visit Thailand

2:55 am on Feb 4, 2007 (gmt 0)

With so many larger and larger screens, web TV's etc.

How does one set the maximum page width while keeping a minimum.

So for example you could set the minimum to 600 pixels or 80% and have a max at 1,240 or something?

Would it be best to use java script or css?

I have to ask because I do not want to have a fixed screen size but also do not want pages to expand 100% when displayed on a massive screen.

Thank you.

TomAnthony

12:24 am on Feb 7, 2007 (gmt 0)

You should be able to do this with CSS using the max-width property.

However, IE6 won't understand max-width. You will need to use an expression, something like:

width:expression(document.body.clientWidth > 1024? "1024px": "auto" );

If you need further help, this should really be in the CSS forum.

Hope that helps! :)

Visit Thailand

1:01 am on Feb 7, 2007 (gmt 0)

Thank you TA.

Would it be possible for a mod to move this to the CSS forum please? saves starting a new one.

[edited by: Visit_Thailand at 1:01 am (utc) on Feb. 7, 2007]

DrDoc

1:01 am on Feb 7, 2007 (gmt 0)

Technically, this is what you would want to do:

min-width: 600px;
max-width: 1200px;
width: auto;

As was said, this requires some basic CSS support. This should generally not be a problem, aside from IE 6 and earlier. For IE, take a look at Dean Edwards' IE7 library [dean.edwards.name].

Visit Thailand

1:08 am on Feb 7, 2007 (gmt 0)

Thanks Dr.Doc.

designaweb

9:02 am on Feb 21, 2007 (gmt 0)

Am I being thick? The code below is definitely working in FF, but IE7 doesnt limit the div's width to 500px, but set's it to 100%. I thought IE7 had support for this CSS property?


<html>
<head>
<title> new document </title><style>
#max {
background-color: red;
max-width: 500px;
}
</style>
</head>
<body>
<div id="max">content</div></body>
</html>

SuzyUK

10:19 am on Feb 21, 2007 (gmt 0)

at the risk of beginning to sound like a stuck record ;)

What's your Doctype?

can I please just repeat that support of newer properties (css enhancements) and features in IE6 AND IE7 is only possible with a Compliant/Strict rendering DOCTYPE

and designaweb you're not thick.. it's not just you - it's IE7 that's helping highlight something that was already there

see this post [webmasterworld.com] for some further reading

Suzy

designaweb

11:08 am on Feb 21, 2007 (gmt 0)

SuzyUK, thanks! :-)

using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> now...

Visit Thailand

11:24 am on Feb 21, 2007 (gmt 0)

On this same subject may I ask whether there is any design danger using a min and max width like this?

My main concern is when someone sticks the site onto a massive display. Previously it would stretch and to be frank look ridiculous.

Is there any danger for regular monitors?

rocknbil

9:15 pm on Feb 21, 2007 (gmt 0)

No, it shouldn't, max-width should only kick in if the viewport . . . exceeds max-width. :-)

I've had this coded in for as much as two years now on some sites and simply refuse to hack CSS for the very reasons that I don't use conditional Javascript, eventually support for it might dissappear and render a site worthless, coming back to burn me. If I get cornered in a hack, I redesign around it. So this property is the one area I've just let IE 6 do what it does. I suppose it's the one thing we should be thankful for in IE 7.

Visit Thailand

2:39 am on Feb 22, 2007 (gmt 0)

Thanks. So what do people believe should be the max-width?

My screen res is 1920x1200 and screens are getting bigger, especially with TV and flat screen monitors etc.

There does seem to be a general consensus when it comes to minimum but not much when it comes to max.

I do realise that it depends on how the site looks but what are your ideas as most sites will begin to look funny when expanded too much?