Welcome to WebmasterWorld Guest from 54.163.35.238

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)

WebmasterWorld Senior Member 10+ Year Member



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)

5+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



Thanks Dr.Doc.

designaweb

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

10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<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)

WebmasterWorld Senior Member 10+ Year Member



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?

 

Featured Threads

Hot Threads This Week

Hot Threads This Month