homepage Welcome to WebmasterWorld Guest from 54.225.57.156
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




msg:3242130
 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




msg:3244701
 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




msg:3244725
 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




msg:3244727
 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




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

Thanks Dr.Doc.

designaweb




msg:3258648
 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




msg:3258687
 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




msg:3258707
 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




msg:3258710
 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




msg:3259383
 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




msg:3259693
 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