homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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.



 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]


 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.


 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?

<title> new document </title>


#max {
background-color: red;
max-width: 500px;




<div id="max">content</div>



 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



 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?


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

<breathing sigh of relief at the support of this property, finally>

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?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved