Log in

View Full Version : max-width help please


mdcloud
05-01-2007, 02:23 PM
i have been trying to get my page to size up in different resolutions. i came across the max-width command and it sounded very helpful but it doesnt seem to do anything. can someone explain? perhaps i have the wrong syntax or something

thank you
boogyman
05-01-2007, 03:21 PM
max-width should set the selector to a width that it cannot exceed. You need to be careful on where you put this style though, as the rules of scope apply. What I mean by that is that any in-line styles will override embedded styles, and any embedded will override linked, so take for example

Example 1.1 (http://dividinglimits.com/test/example1.1.html)
Linked


<link type="text/css" rel="stylesheet" href="presentation.css" media="all" />

presentation.css
body {background: #f00;}
div#cont {
max-width: 800px;
background: #ff0;
}



Example 1.2 (http://dividinglimits.com/test/example1.2.html)
Embedded


<style type="text/css">
<!--
body {background: #0f0;}
div#cont {
max-width: 600px;
background: #0ff;
}
// -->
</style>


Example 1.3 (http://dividinglimits.com/test/example1.3.html)
Inline


<body style="background:#00f">
<div style="max-width: 400px; background: #f0f;">


now we have our css down and we can look at the different ways it is viewed. when they are combined

Example 2.1 (http://dividinglimits.com/test/example2.1.html)
Linked StyleSheet With Embedded Styles

Example 2.2 (http://dividinglimits.com/test/example2.2.html)
Embedded StyleSheet With Inline Styles

Example 2.3 (http://dividinglimits.com/test/example2.3.html)
Linked StyleSheet With Embedded Styles With Inline Styles
I left out the inline style on the body on this example to show you that it only applys to what is relavent. And since there is not inline style on the <body> tag, it takes the style from the embedded style sheet


I hope this helps, and if you need more assistance just ask... and be sure to wrap your scripts in [c.ode][/c.ode] without the dots ( . )


Disclaimer: Text for these examples came from Operation Hero Miles (http://heromiles.org). You don't have to support the war, but you should still Support Our Troops. Donate your flier miles, and let soldiers visit their loved ones
Veronica
05-01-2007, 03:32 PM
max-width does just what it says - sets a maximum value for the width of a div, which is very useful if, for example, you don't want your content to go from one end of a wide resolution to another.
But - it doesn't work in IE6.
There's a strange little hack that IE6 will recognize (other browsers will ignore it). Let's say you want to set a max-width for a div with the id of content.



#content{
max-width:400px;
width: expression(Math.min(parseInt(this.offsetWidth), 400px ) + "px");
}


The disadvantage is that it only seems to work with px, not percentages. Also, if someone has javascript turned off, it won't work. (sigh...)

The other thing you could do, if you want to avoid the max-width issue, is set up your page so you have a div with a fixed width, surrounded by divs with fluid width.
mdcloud
05-02-2007, 03:55 PM
thanks. i will give that a shot. thank you both for your help. the ie6 thing is what was throwing me off i think. thanks for your input.