CSS - Test Your CSS Skills Number 28 (max-width)

**Paul O'B** · Sep 25, 2009, 12:28

CSS - Test Your CSS Skills Number 28 : Quiz now ended - Solution in post #38

Just as you are recovering from the last mammoth quiz, please don't rush to put your braincells away just yet as I have another CSS myth to squash.

Following on from a suggestion by Luki_be in this thread I have another challenge for you to do which is to implement max-width in IE6 without using javascript or expressions. We already squashed min-width in a previous quiz so now we attack max-width with a vengeance.

As you know IE6 doesn't support max-width and commonly authors will use an expression or javascript to accomplish this which is undesirable for a number of reasons. Therefore your mission is to create a page that can be squashed to nothing but as it expands it stretches to only a maximum width of 800px (but it could of course be anything).

Once the element is at 800px width it should then be centred in the viewport if the viewport is wider. This would be the same as setting max-width of 800px and using margin:auto.

Edit:

Edit:

I should also point out that I'm not looking to mimic this type of behaviour as follows.

Code:

.test{
max-width:800px;
width:70&#37;;
}

The element .test should be content width and then get capped at 800px width.

Code:

.test{max-width:800px}

Look at the attachments which show working examples of max-width in action in IE6.

The answer is relatively simple and took me about 10 minutes to work out but then I may just have been lucky as google shows no results for this at all

The basic rules are:

valid css/html
no tables
no javascript
No expressions/behaviours etc
no conditional comments in the body of the html

Try to keep the code as simple and usable as possible and the look as close to my original as you can (which is shown in the attachment).

Any questions or if anything is unclear just ask and remember this is just for fun

(although this solution will indeed be a very workable solution for IE6)

Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

Have fun .

Paul

PS. : In case you missed the other tests you can find them all listed here:

**RyanReese** · Sep 25, 2009, 12:56

Paul question-did you need any additional elements? Look at this base

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Max width</title>
<style type="text/css">
*{margin:0;padding:0;}
#outer
{
	margin:0 auto;
	max-width:800px;
	background:blue;
}
</style>
</head>
<body>
<div id="outer">
	<p>test</p>
</div>
</body>
</html>

Did you need another element? You don't have to tell me where I'm just wondering if it involves one.
How big was your CSS after completion?

Edit:

If you can't answer that's fine too

**Paul O'B** · Sep 25, 2009, 13:00

Yes you do need some extra elements but not many. I won't say exactly how many as that would be too much of a clue at this stage. The answer is quite uncomplicated html wise and of course my answer may not be the only way to do it as I'm sure you will all surprise me once again

**YuriKolovsky** · Sep 25, 2009, 14:24

oh, its on already? but its almost 12pm!! i will have a look tomorrow morning (while im still zombified)

**Paul O'B** · Sep 26, 2009, 06:29

I should also point out that I'm not looking to mimic this type of behaviour as follows.

Code:

.test{
max-width:800px;
width:70&#37;;
}

The element .test should be "content width" and then get capped at 800px max width.

Code:

.test{max-width:800px}

**PicnicTutorials** · Sep 26, 2009, 07:00

I'm guessing some kind of nested div border trick. But beyond that, not a clue?

**Paul O'B** · Sep 26, 2009, 07:20

Originally Posted by EricWatson

I'm guessing some kind of nested div border trick. But beyond that, not a clue?

Nope

(not in my example anyway - but there may well be other solutions)

**PicnicTutorials** · Sep 26, 2009, 08:36

OK. I "really" don't have a clue then.

**YuriKolovsky** · Sep 26, 2009, 10:48

i remember trying to find a solution to this some time ago, i never did find it, so im very excited that it will be posted at the end of the quiz!

this does not mean that i will stop trying.

**kohoutek** · Sep 26, 2009, 12:57

It took you ten minutes? Not sure I should even bother then. I'll probably be 35 by the time I figured it out.

I'll give it a try in the next few days.

**YuriKolovsky** · Sep 26, 2009, 13:24

Originally Posted by kohoutek

It took you ten minutes? Not sure I should even bother then. I'll probably be 35 by the time I figured it out.

I'll give it a try in the next few days.

hahaha well said maleika!
i just hope its nothing to do with his encyclopedic knowledge of css, i prefer the mathematical ones.

**RyanReese** · Sep 26, 2009, 15:19

Funny thing is Paul this can be done with a table soooooooo easy

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Max width</title>
<style type="text/css">
*{margin:0;padding:0;}
table{margin:auto;}
td{width:800px;background:blue;}
</style>
</head>
<body>
<table>
<tr>
<td>text</td>
</tr>
</table>
</body>
</html>

Pure CSS-IDK-still trying though

**YuriKolovsky** · Sep 27, 2009, 01:47

ok, solved it.
making a usable example.

**Paul O'B** · Sep 27, 2009, 05:14

Well done Timo the example you sent is exactly the same as mine

It works very well doesn't it.

I'm sure that many others can do this so get your thinking caps on. It needs very little code to achieve this.

**YuriKolovsky** · Sep 27, 2009, 05:32

yes! it does work well, i also made a max-width/min-width example to make it completely usable, (paul did too), because they really do complement each other.

This is one of those thinking quizzes, that don't require any encyclopedic knowledge of css,
and also, Paul gave plenty of clues (at least 4), so use those if your feeling stuck!

**Blake Tallos** · Sep 27, 2009, 22:48

Hmmm, im guessing if you cant use min-width you can do something like

Code CSS:

min-width:1em;

? Using EM can make the container expand according to content.

**pixeline** · Sep 27, 2009, 23:10

What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

You'd have to do a tradeoff, right? Because you can't set the width (or the height) at 2 different values. So there, you 're back to using javascript.

**Paul O'B** · Sep 28, 2009, 01:37

Mal curtis from Sitepoint staff has also sent me a correct solution

Well done Mal.

Any other takers?

Originally Posted by Blake

Hmmm, im guessing if you cant use min-width you can do something like CSS Code:

min-width:1em;

min-width doesn't work in IE6 Blake

(see a previous quiz for answers on min-width)

Originally Posted by pixeline

What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

You can use the ie6 min-width routine from a previous quiz and wrap it up with this max-width answer quite easily as already mentioned a couple of times above. This will allow you to mimic the exact behaviour of the following code in IE6:

Code:

.test{
min-width:600px;
max-width:1200px;
}

The quiz answer does not however cater for this types of structure below though:

Code:

.test{
min-width:600px;
max-width:1200px;
width:70%;
}

The quiz is only concerned with max-width. We are not building max-height into it and so does not need to be discussed here (maybe another quiz at another time). Regarding min-height then you don't need to do anything for IE6 because it treats height as a minimum anyway.

Remember these quizzes are for fun and to show your ability in manipulating css to produce the desired result. Whether or not the answers have real world applications is secondary to the quiz but indeed many of the quizzes do have useful real world uses.

**YuriKolovsky** · Sep 28, 2009, 14:08

Originally Posted by pixeline

What if you wanted to set both the min-width and max-width? Or the min-height and max-height?

You'd have to do a tradeoff, right? Because you can't set the width (or the height) at 2 different values. So there, you 're back to using javascript.

no not really, i have currently min-width and max-width set without javascript in every browser, i can also set the min-height and max-height in any browser if i wanted to, but i don't see any real need for this as sticky footers are much more comfortable.

there, im still not using javascript (for anything but fancy special effects).
(please don't use expressions for your own sake, just write a small javascript function and leave it at that.)

Remember these quizzes are for fun and to show your ability in manipulating css to produce the desired result. Whether or not the answers have real world applications is secondary to the quiz but indeed many of the quizzes do have useful real world uses.

they always do, either in the form of knowledge, or in the form of the actual quiz, i always find them useful.
but for reference reasons, the quizzes are kept separate and as simple as possible, regardless if they are usable or not (who knows, someone might make a usable version after seeing a quiz).

this quiz is indeed usable in the above scenario.

**Paul O'B** · Sep 28, 2009, 14:14

Another correct entry received from Erik J (who has also combined the min-width routine into the demo). Well done Erik

How is everyone else doing?

Do you need more clues?

**kohoutek** · Sep 28, 2009, 15:07

I haven't tried yet and am not sure I will have enough time to do so this week. I have four clients that need attending to.

If the weekend is included, I will definitely participate and try to solve the quiz.

Anyway, congrats to everyone so far. I have no doubt that all things that were thought impossible wil be solved right here. Good times.

**Anton P** · Sep 28, 2009, 16:24

Nice quiz idea! Funny we didn't think of it during the min-width quiz

.

One way to think about 'max-width' is that a box should expand naturally until a certain point – and is then prevented from expanding further. I suspect there's just one single way (modulo minor variations on a theme) to exploit IE6's rendering model to achieve this: I'm sure we've all come across a certain feature of IE6 where a box's width isn't as wide as we might have hoped (nor indeed as wide as it would have been in a CSS21-compliant browser), due to external factors, and often cursed it

.

(...All the while celebrating it at other times, wishing it were part of the CSS21 spec; it's that old "in-column typography vs grid-layout" dichotomy again!)

Originally Posted by Paul O'B

You can use the ie6 min-width routine from a previous quiz and wrap it up with this max-width answer quite easily as already mentioned a couple of times above. This will allow you to mimic the exact behaviour of the following code in IE6:

Code:

.test{
min-width:600px;
max-width:1200px;
}

Almost

. Whilst the solution (assuming there's only one) plays nicely with 'min-width', it's not truly a 'max-width' replacement, even in the limited case where it is not used in conjunction with 'width'. In particular, my above characterization of 'max-width' omitted one other important behaviour of CSS21 max-width: that content which is wider than the container's computed 'max-width' should overflow. Alas the very IE6 behaviour which we can exploit to help produce our pseudo 'max-width' also /inhibits/ overflow, instead preferring to widen the container. Still, that's a different issue and there are other workarounds for it (which are also discussed in the min-width quiz, as it happens) and so this is not a concern.

I also note that, in my solution at least, another well-known IE6 bug rears its head when combining the min-width and max-width techniques, but you have to look closely to see it! (I'll provide the details once the quiz is over.)

Originally Posted by Paul O'B

The quiz answer does not however cater for this types of structure below though:

Code:

.test{
min-width:600px;
max-width:1200px;
width:70&#37;;
}

Indeed, and I'm going to stick my neck out and say that I strongly believe that there is no way to mimic a combination of 'width' and 'max-width' in IE6 using only HTML and CSS (except /perhaps/ using tables, which I haven't given much thought to because my gut feeling is "no" even then.) The thing about 'width' in IE6 is that it's really agressive; once you've set it (other than 'auto') I really don't think you can then suppress it, neither by fair means nor foul. The IE6 expanding box behaviour is but one consequence of this.

Originally Posted by Paul O'B

The quiz is only concerned with max-width. We are not building max-height into it and so does not need to be discussed here (maybe another quiz at another time). Regarding min-height then you don't need to do anything for IE6 because it treats height as a minimum anyway.

Yes; unlike 'width', 'height' really does behave the same as CSS21 'min-height' in IE6. I was going to be brave (foolhardy?!) and claim that I believed that 'max-height' could not be mimicked in IE6. (Max-height is a strange concept in CSS21, since the idea that boxes ordinarily expand completely freely in the 'height' direction is central to the CSS21 rendering model. It's doubly so in IE6, where it's really hard to get things to overflow properly even at the best of times.) However, Timo (YuriKolovsky) has just stated that he has a working 'max-height' in IE6, so I'm going to give it some more thought first!

**Luki_be** · Sep 28, 2009, 18:18

I'm ashamed to say that i'm swamped with stuff to give it my own try this week but maybe if i got an opening i'm gonna give it a try. I hope Erik J.'s solution gets posted though. The combination of min/max seems very useful

**Paul O'B** · Sep 29, 2009, 01:33

Originally Posted by Anton

and is then prevented from expanding further. I suspect there's just one single way (modulo minor variations on a theme) to exploit IE6's rendering model to achieve this:

Thanks for the comments Anton

There are no quirks needed for this at all and the solution works in all browsers without using max-width for good browsers either.

Indeed my min and max width version works in all browsers without using min and max width at all.

Almost

. Whilst the solution (assuming there's only one) plays nicely with 'min-width', it's not truly a 'max-width' replacement, even in the limited case where it is not used in conjunction with 'width'. In particular, my above characterization of 'max-width' omitted one other important behaviour of CSS21 max-width: that content which is wider than the container's computed 'max-width' should overflow.

While you are 100% correct that the content overflow should be visible by default if max-width is exceeded it would be a little churlish to say that it isn't a true representation of this behaviour of max-width for the purposes of the quiz.

Especially as the problem is an inherent problem with width/height itself due to the expanding box problem in IE6. In fact we could disallow all quizzes so far on this basis as width does not work in any one of them the way it should do