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
Linked

Code:

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

Code:

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

Example 1.3
Inline

Code:

<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
Linked StyleSheet With Embedded Styles

Example 2.2
Embedded StyleSheet With Inline Styles

Example 2.3
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. 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.

Code:

#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.

Thread: max-width help please

Thread Tools

Search Thread

max-width help please

Bookmarks

Bookmarks

Posting Permissions