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

[Anton P]

Originally Posted by Paul O'B

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.

Great! By adding one extra property to induce the key behaviour, the solution I have works in all browsers too; but this property is harmless yet useless in IE6 which instead needs a different property to induce that same behaviour, which in turn is harmless yet useless in all other browsers. So I couldn't truthfully claim that the technique was identical in all browsers although it's about as close as you could otherwise be.

So it sounds like there may be multiple sufficiently different methods after all. Looking forward to seeing them!

Originally Posted by Paul O'B

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.

Certainly! My point, which I failed to express clearly, is that the "max-width" unfortunately cannot itself "solve" the problem of the expanding box / overflow behaviour because it is itself vulnerable to that same behaviour! So it's no more a 'max-width' than '_width' is a 'width'. But as I say, it's of no concern anyway because there are simple workarounds to the expanding box / overflow problem.

Originally Posted by YuriKolovsky

slight correction, i did not state that i have a working max-height, i only stated that i think i know how to make a max-height.

Ah, that's quite different

[YuriKolovsky]

Anton P, send your solution to paul, i would love to see it at the end of the quiz,
note, were not aiming for getting any true min-height for IE, we cant really do it because its not included in the browser,
were simply trying to replicate its visual behavior effects, we might not even replicate all of it, but as long as it matches the screen-shots paul provided, its valid.

we want to replicate it, and not create it, as an example, were not trying to do

_width = width

were trying to do something like:
width + width + padding - margin = max-width
or
_width + min-width = min-width

or sometimes exploiting IE6 bugs or masking others or using unusual behavior.

Even though structurally its not the same, it creates the same visual effects and thats all that really matters, hacks or no hacks, tricks or no tricks. (because blind people don't even see CSS (except some exceptions like display:none)

[Anton P]

Originally Posted by YuriKolovsky

Anton P, send your solution to paul, i would love to see it at the end of the quiz

For various reasons, I prefer not to participate in that way, but I'll certainly post what I have once the quiz has ended!

Originally Posted by YuriKolovsky

were simply trying to replicate its visual behavior effects, we might not even replicate all of it, but as long as it matches the screen-shots paul provided, its valid.

Of course! One of the very nice things about this quiz series is that the exercises are accessible on various levels, admitting a variety of solutions ranging across the spectrum from optical illusion to technical construction.

I'm not too sure what your observations were in response to, since of course I agree with them! I think that maybe you have the impression that I find a solution "bad" if it is not perfect. This is certainly not so, not least because "perfect" is usually not possible . However, my approach to the quizzes may well be different from some other people's. I'm personally interested in methods which reach a certain quality baseline in how they blend HTML with the style model of CSS or of the IE6/7 renderer, judged on the final balance of meaningful markup, stable style ideas (both CSS and IE6/7), semantic style ideas (CSS), accessibility, maintainability and cross-browser similarity, and more. I judge how "good" a solution is, not by how close it gets to perfect, but by how close it gets to the "optimal" possible balance of these criteria given the technical limitations of the medium and the browsers. (What makes this quiz and especially the recent ones fascinating is that, in addition to other approaches, they admit solutions which are very close to "optimal" in this regard.)

In this max-width quiz, for example, far from being bad, we'll probably see solutions which are close to the best you can get using the IE6 rendering model -- and that's a great result, not a disappointing one! But that does not mean we should not point out their flaws; quite the opposite in fact. Being explicit about their flaws is essential, both for setting the expectations for those deciding whether to employ the techniques in the real world, and for providing the benchmarks against which other techniques for solving the same problem can be quantitatively judged.

Not everyone need approach the quizzes from this angle. It's equally interesting to see solutions which are imaginative, odd-ball, loophole-exploiting etc! But amongst the many participants and observers who are knowledgeable about CSS and browser behaviour, it's fun to engage in the intellectual challenge of getting as close as possible to "optimal"

[kohoutek]

I sort of wish these type of discussions took place once the submissions for a quiz were closed... :/

[YuriKolovsky]

ok

[Paul O'B]

Originally Posted by kohoutek

I sort of wish these type of discussions took place once the submissions for a quiz were closed... :/

Yes good point Maleika

[Anton P]

Apologies; I did not mean to distract from the task of actually solving the quiz. Have fun with it!

[Paul O'B]

I have a correct solution from danieljames so well done daniel

(Daniel also submitted a version that nearly catered for the max-width and width xx% properties mentioned earlier. It was a good attempt.)

Anyone else getting close with the answer yet?

[kohoutek]

Originally Posted by Anton P

Apologies; I did not mean to distract from the task of actually solving the quiz. Have fun with it!

That was not my issue, Anton P. I admire the intellect and thorough analysis showcased in the discussion, but my problem is that not all of us are CSS wizzards or gurus, at least I'm not, and the discussion had so many clues in them that it took the fun out of going through the learning experience from step zero. For me anyway. I might be alone in this though, but for me, the challenge lies in doing research, learning, and coming to a conclusion on my own, rather than being given too many brain-aids.

[YuriKolovsky]

That was not my issue, Anton P. I admire the intellect and thorough analysis showcased in the discussion, but my problem is that not all of us are CSS wizzards or gurus, at least I'm not, and the discussion had so many clues in them that it took the fun out of going through the learning experience from step zero. For me anyway. I might be alone in this though, but for me, the challenge lies in doing research, learning, and coming to a conclusion on my own, rather than being given too many brain-aids.

look who's talking! you were always a css guru in my eyes! xD
additionally there were no clues in the conversation with anton, and it was hard to understand not because it's highly technical css, but because its full of thinking examples and specific analysis of the understanding of what a ideal css quiz solution would be, it was a talk about general things in these quizzes saying that the solution does not necessarily replace the css properties, so don't worry maleika, there were no brain aids in the conversation.

but i agree that the conversations should be kept after the quiz.

For me anyway. I might be alone in this though, but for me, the challenge lies in doing research, learning, and coming to a conclusion on my own, rather than being given too many brain-aids.

im the same in that regard (well sometimes i cheat my way through, but thats when i dont have time).

[Anton P]

Originally Posted by Paul O'B

Daniel also submitted a version that nearly catered for the max-width and width xx% properties mentioned earlier. It was a good attempt.

Excellent work! Can't wait to see it.

Originally Posted by kohoutek

the discussion had so many clues in them that it took the fun out of going through the learning experience from step zero.

I consciously tried to avoid letting any clues slip; my sincere apologies if I failed with that. In future I will save such discussions until after the quiz has finished.

[Paul O'B]

Originally Posted by Anton

I consciously tried to avoid letting any clues slip;

I don't think you let anything slip but I guess Maleika may have thought that there were clues there as she hadn't attempted it yet.

No harm done and at least we all should be aware now not to give anything away - until I start throwing clues right at the end of the quiz.

I'll let the quiz run over the weekend and post results on Monday.

Thanks to all who have contributed thus so far anyway

[Paul O'B]

Solution Time

I hope you haven't been "maxed out" with this quiz but in case you have then here are the answers and explanations.

Although, no-one (try and google it) previously to this quiz seems to have "cottoned on" to this method it is in fact quite a simple and usable technique. To create a max width of say 800px we need obviously to create a space that is 800px wide at most but the problem arises in that if you set a width then all you get is 800px and no less. Therefore we need a way to create a space but to have that space shrink as required so that it only becomes a fixed width when it reaches 800px.

How's It Done

The answer lies in negative margins once again combined with floats.

We create 2 floats of 50% width that stretch all the way across the containing block (or viewport in our case). Of course that does not give us any space to use so we use a negative margin on each float to create some negative space. We need to create 800px space so we simple apply a negative margin to each float of 400px each. The margin should be attached to the opposite side of which way the element is floated (although you can make this work the other way around but it's best the way I show it).

For example if the element is floated left then you use a negative right margin (and vice versa). A negative margin used in this way doesn't actually change the size of the float but allows content to approach from that side (see my article on negative margins for a clearer description of this effect). The result is that are 2 x 50% floats now have a space in the middle that could accommodate 800px of content if needed.

All we need do now is create another container that sits between these 2 floats (which it will do automatically) and to stop the text wrapping under the floats we use overflow other than visible which makes the element form a rectangular block that won't allow its content to wrap under the float. For IE6 we merely need to induce haslayout to create the same effect. (I am ignoring the 3px difference that the 3px jog will apply to this element).

So the code to do all this is very simple.

.l, .r {
    float:left;
    height:1px;
    width:50%;
    margin:0 -403px 0 0;
}
.r {
    float:right;
    margin:0 0 0 -403px;
}
.inner {
    position:relative;
    z-index:2;
    border:5px solid #000;
    overflow:hidden;
}
* html .inner {
    height:1%;
    overflow:visible
}

<div class="l"></div>
<div class="r"></div>
<div class="inner"><p>Lorem ipsum</p></div>

I have set the float to only 1px high which means that when the page is squashed the float drop is only1px. Some of you gave greater heights in your demos and the float drop makes the page disappear downwards.

The routine above actually works everywhere and so there are no hacks and no alternative code needed for any other browser.

Although I mentioned at the start that I didn't want you to implement a percentage width on the element as well.

e.g. Somethng like this:

.test{
max-width:800px;
width:70%;
}

It can actually be achieved by not setting a width but setting percentage margins instead. If we give the element a margin:0 10% then effectively we are giving it an 80% width. So we have almost a full implementation of max-width (within reason).

We can also incorporate with this method one of the min-width routines from the previous quiz with no problem.

As with most of my quizzes I have discussed these techniques before and this latest quiz is very similar to this old layout of mine that has a fixed centered element but has fluid side column. The only difference is that I used a fixed width element in the middle column.

Instead of posting all the code I have uploaded a few versions for you to play width.

A basic version:
A basic version with floated image:
A version with 2 max width elements:
A version width max width and the element also has a percentage width:
A version that combines min-width from a previous quiz.
Finally (prompted by Erik J) a version with a sticky footer:

Winners and Losers

I had entries from the following members who all successfully completed the quiz (although with the odd caveat):

Yurikolovsky, Erik J, Mal Curtis and Daniel James.

Well done to all and thanks for entering.

While most of the above used similar methods to mine some of them were only working in IE6 and needed different code for other browsers. Although I didn't rule this out I was looking for neater solutions using the same (or very nearly the same) code for all browsers.

Some of the above entries used the negative margin on the reverse side of the float to the way that my original was created resulting in a horizontal scrollbar appearing on the right side of the browser hence the need for extra code to hide this in certain browsers. Also some of the solutions didn't work if there was little content to stretch the inner element either.

However all basically worked and could be fixed quite easily anyway.

Taking everything into account I have to share first place with Erik J, and Yurikolovsky but well done to all those that took part.

Their entries will follow in the next post...

[Paul O'B]

Entries:

Yurikolovsky: (min and max widths (+ advertisment in dead space lol))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Max-Width in IE6 - quiz28 Yuri</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
/*max-width:800px*/
#inner {
    float:left;
    max-width:800px;
}
#left, #right {
    float:right;
    width:50%;
    margin-left:-400px;
}
#left {
    float:left;
    height:10px;
}
/*min-width:600px;*/
#outer {
    width:100%;
    min-width:600px;
}
* html #outer2 {
    border-left:600px solid #fff;
    position:relative;
    float:left;
    z-index:1;
}
* html #inner {
    margin-left:-600px;
    position:relative;
    float:left;
    z-index:2;
}
/*styling*/
#inner {
}
img {
    background:orange;
    display:block;
    float:right;
    margin:10px;
    border:solid #000 5px;
}
/*you can even put ads (like in quiz 24 #1) into the #right and #left magic div's, seems to have slight text bug in ie6*/
#left, #right {
    overflow:hidden;
    position:relative;
    height:600px;
}
.ad1, .ad2 {
    position:absolute;
    right:10px;
    width:200px;
    height:600px;
    background:red;
    display:block;
}
.ad2 {
    right:auto;
    left:10px;
    margin-left:400px;
}
</style>
</head>
<body>
<div id="outer">
    <div id="left"><span class="ad1">Ad1</span></div>
    <div id="right"><span class="ad2">Ad2</span></div>
    <div id="outer2">
        <div id="inner">
            <h1>Max width in IE5-6 without JavaScript or expression</h1>
            <img src="#" width="300" height="300"/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit enim ac magna rutrum semper vestibulum ipsum lobortis. Etiam quis nibh nisl. Nulla sagittis lobortis augue, a porta nulla ultrices ac. Quisque aliquet lobortis tortor ac bibendum. Vestibulum sed nulla dui. Mauris eu lobortis lectus. Duis dapibus hendrerit consectetur. Donec ac mi et massa hendrerit cursus eget sed urna. In a justo sed metus consequat pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vestibulum tincidunt nisl non pulvinar. Nulla sitamet enim venenatis magna malesuada pellentesque ut nec metus. Vestibulum ac hendrerit justo. Maecenas vulputate consequat consectetur. In augue est, blandit vel semper in, ullamcorper quis lorem. Nam posuere suscipit augue a accumsan. Suspendisse eu tortor dolor, vel dictum ipsum. In massa ante, suscipit ut tincidunt ac, volutpat a orci. Donec feugiat vehicula sapien sitamet pulvinar.
            
            Donec sapien magna, eleifend sit amet tincidunt id, malesuada non nisi. Praesent et lacus at quam convallis egestas nec eget justo. Nam tellus velit, adipiscing ut dictum eu, convallis ultricies massa. Nulla id orci est, ut vehicula lacus. Sed tellus nisl, malesuada id feugiat eu, suscipit eu elit. Vivamus gravida venenatis semper. Integer viverra fermentum massa, a pellentesque ante iaculis et. Vestibulum orci nunc, vulputate accumsan suscipit at, vehicula et ipsum. Aliquam non dui leo. Suspendissevarius, massaeu scelerisque interdum, enim neque sagittis sem, nec rhoncus orci orci interdum tellus. Sed leo libero, volutpat et ornare bibendum, eleifend vel dolor. Morbi pretium, orci a ultricies rutrum, sapien nibh bibendum tortor, nec sagittisipsum libero eu ipsum. Nulla facilisi. Mauris rutrum justo sit amet neque interdum volutpat. Suspendisse tempor, turpis in gravida eleifend, velit orci ullamcorper sapien, cursus commodo nisl enim vehicula justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            
            Phasellus felis risus, malesuada vel porta sit amet, rhoncus ac nulla. Vivamus velit massa, pellentesque mattis faucibus at, lobortis id arcu. Proin blandit, enim ac gravida egestas, libero arcu commodo nulla, a sollicitudin purusjusto ac augue. Nullam augue odio, vehicula eu porta eu, egestas at odio. Aliquam euismod magna quis lorem convallis ornare. Sed eleifend mollis faucibus. Nunc pharetra, magna sed gravida pharetra, tortor erat iaculis neque, id interdum magna augue id metus. Morbi ut libero aliquam justo lacinia elementum. Nam sed mollis ipsum. Ut turpis orci, tempus ut congue id, fringilla a nibh. Ut purus nulla, dictum ultricies varius cursus, egestas quis magna.
            
            Vivamus ac tincidunt magna. Vivamus lobortis odio eget nisi adipiscing vulputate. Cras in mollis ante. Quisque nec lorem a tellus commodo iaculis. Vestibulum scelerisque ornare nisl, vitae tempor quam porttitor ac. Etiam malesuada varius imperdiet. Aliquam massa lectus, sagittis at ultricies non, mollis id nibh. Cras imperdiet vehicula lacus a luctus. Vivamus sem nibh, sodales quis porttitor eget, convallis eget felis. Cras sed libero blandit ipsum mollis pellentesque nec id lacus. Cras fringilla mollis elit ut fringilla. Duis gravida sem sit amet justo commodo vel consequat enim mattis.
            
            Quisque non leo at orci lacinia congue nec ut neque. Donec iaculis ante ornare orci dignissim in dignissim est aliquam. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec commodo eleifend mauris, ac auctor arcu rhoncus faucibus. Morbi elit lectus, euismod id sollicitudin ac, ullamcorper sed lorem. Pellentesque lectus neque, fermentum a congue vel, feugiat vitae arcu. Donec dolor magna, ullamcorper sit amet imperdiet eu, elementum sed libero. Proin vulputate interdum dolor in mollis. In a est non mauris volutpat lobortis sit amet a sapien. Pellentesque ultricies eros at neque porttitor porta. Etiam interdum varius magna, venenatis faucibus urna euismod ut. Fusce facilisis neque eget urna mattis sed dignissim orci fringilla. Sed vitae neque accumsan magna consequat ultrices. Nullam et pellentesque augue. </div>
    </div>
</div>
</body>
</html>

Erik J; (min and max width)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Quiz #28 // Erik J</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
/* IE6 mimicking a 600px min-width and a 900px max-width on a fluid 80% wide page using auto-center. */
body {
    margin:auto;
    padding:0;
    width:80%;
}
h1, p {
    margin:10px 0;
    text-align:justify;
}
#wrapper {
}
#bumperleft {
    float:left;
    display:inline;
    position:relative;
    margin-left:-450px;
    width:50%;
}
#bumperright {
    float:right;
    display:inline;
    position:relative;
    margin-right:-450px;
    width:50%;
}
#outer {
    float:left;
    display:inline;
    position:relative;
    margin-left:600px;
}
#content {
    float:right;
    display:inline;
    position:relative;
    margin-left:-600px;
    border:1px solid;
    padding:10px;
    background:#ff9;
}
</style>
</head>
<body>
<div id="bumperleft"></div>
<div id="bumperright"></div>
<div id="outer">
    <div id="content">
        <h1>IE6 mimics min-width and max-width on a fluid width using auto-center.</h1>
        <img src="" width="300" height="150" style="float:right; margin-left:10px; background:red;">
        <p>Lorem ipsum dolor sit amet consectetuer tempus justo ornare nec interdum. Tellus Sed nulla quis Nunc adipiscing laoreet ac sociis laoreet mauris. Sem id pellentesque tellus. Cursus augue vel id consequat sem justo Sed interdum ligula ut. Molestie egestas rutrum pede.</p>
        <p>Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. Platea mollis adipiscing quis in lacinia Vestibulum molestie sem sagittis id. Nibh Nam pede gravida magnis purus. Pretium nec ac eu et id id mollis Sed et elit.</p>
        <p>Rhoncus neque aliquam dolor id et natoque porttitor pellentesque sollicitudin enim. Dictumst turpis et sed. Tincidunt consectetuer massa mauris ut. Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. </p>
    </div>
</div>
</body>
</html>

Erik J: (min and max width + 100% high with sticky footer)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Quiz #28 // Erik J</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html{
    overflow-y:scroll;
}
html, body{
    margin:0;
    padding:0;
    height:100%;
    font-size:100%;
}
body:before {
    content:" ";
    height:100%;
    float:left;
    width:0;
    margin-top:-30000px;
    margin-top:0;
}
h1, p{
    margin:10px;
    text-align:justify;
    font-size:100%;
}
#wrapper{
    z-index:2;
    position:relative;
    margin:-50px auto 0;
    border:solid #ccc;
    border-width:0 10px;
    width:80%;
    min-width:600px;
    max-width:60em;
    min-height:100%;
}
#wrapper:after {
    clear:both;
    display:block;
    height:1%;
    content:"";
}
#header{
    border-top:50px solid;
    height:80px;
    background:#f99;
}
#sidebar{
    float:left;
    width:150px;
}
* html #sidebar{
    margin-right:-3px;
}
#content{
    display:inline-block;
    overflow:hidden;
}
#content{
    display:block;
}
#footer{
    z-index:1;
    position:relative;
    margin:auto;
    border:solid #ccc;
    border-width:0 10px;
    padding-top:1px;
    width:80%;
    min-width:600px;
    max-width:60em;
    height:49px;
    background:#f99;
}
#columnbackgrounds{
    position:relative;
    float:left;
    margin:-999px -10px 0;
    border:solid #ccc;
    border-width:0 10px;
    width:100%;
    height:999px;
    background:#fcc;
}
*+html #columnbackgrounds{
    float:none;
    width:auto;
}
* html #columnbackgrounds{
    float:none;
    width:auto;
}
#columnbackgrounds div{
    float:left;
    width:150px;
    height:100%;
    background:#f66;
}
#footer p{
    margin-top:-.6em;
    padding-top:25px;
    line-height:1.2;
    text-align:center;
}
/* IE6 sticky footer max/min-width: */
* html #wrapper100{
    z-index:1;
    position:relative;
    margin:0 auto;
    height:100%;
    margin:-50px 0 -999px;
}
* html #wrapper{
    margin:0 auto;
    border:0;
    overflow-y:hidden;
    overflow-x:visible;
}
* html .max-bumper-left{
    float:left;
    display:inline;
    margin-left:-31em;
    width:50%;
}
* html .max-bumper-right{
    float:right;
    display:inline;
    margin-right:-31em;
    width:50%;
}
* html .min-width-set{
    float:left;
    display:inline;
    position:relative;
    margin-left:620px;
}
* html .min-width-use{
    zoom:1;
    position:relative;
    margin-left:-620px;
    border:solid #ccc;
    border-width:0 10px;
}
* html #wrapper2{
    position:relative;
    margin:auto;
    width:80%;
    padding-top:999px;
    overflow-y:hidden;
    overflow-x:visible;
}
* html #footer{
    border:0;
    width:auto;
}
</style>
</head><body>

<!--[if IE 6]>
<div id="wrapper100">
<![endif]-->
<div id="wrapper">
<!--[if IE 6]>
<div class="max-bumper-left"></div>
<div class="max-bumper-right"></div>
<div class="min-width-set">
<div class="min-width-use">
<![endif]-->
    <div id="header"><p>Header</p></div>
    <div id="sidebar"><p>Sidebar</p></div>
    <div id="content">
        <h1>In this page IE6 is served extra CSS and HTML <em>but no javascript</em>. It is a centered 80% fluid width page with 60em max-width and 600px min-width. It has a sticky footer and two fake column backgrounds.</h1>
        <img src="" width="150" height="150" style="float:left; margin:0 10px; background:red;">
        <img src="" width="150" height="150" style="float:right; margin:0 10px; background:red;">
        <p>Lorem ipsum dolor sit amet consectetuer tempus justo ornare nec interdum. Tellus Sed nulla quis Nunc adipiscing laoreet ac sociis laoreet mauris. Sem id pellentesque tellus. Cursus augue vel id consequat sem justo Sed interdum ligula ut. Molestie egestas rutrum pede.</p>
        <p>Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. Platea mollis adipiscing quis in lacinia Vestibulum molestie sem sagittis id. Nibh Nam pede gravida magnis purus. Pretium nec ac eu et id id mollis Sed et elit.</p>
        <p>Rhoncus neque aliquam dolor id et natoque porttitor pellentesque sollicitudin enim. Dictumst turpis et sed. Tincidunt consectetuer massa mauris ut. Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. </p>
    </div>
<!--[if IE 6]>
</div></div></div>
<![endif]-->
</div><!--IE6 closes wrapper100-->

<!--[if IE 6]>
<div id="wrapper2">
<div class="max-bumper-left"></div>
<div class="max-bumper-right"></div>
<div class="min-width-set">
<div class="min-width-use">
<![endif]-->
<div id="footer">
    <div id="columnbackgrounds"><div></div></div>
    <p>Footer</p>
</div>
<!--[if IE 6]>
</div></div></div>
<![endif]-->

</body></html>

Continued in next post ...

[Paul O'B]

Mal Curtis:(ie6 only)

<!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;
}
#right {
    float:right;
    width:50%;
    height:100px;
    margin-right:-400px;
    border:1px solid #888;
}
#left {
    float:left;
    width:50%;
    height:100px;
    margin-left:-400px;
    border:1px solid #888;
}
#inner {
    float:left;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="inner">
    <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
    <p>
</div>
</body>
</html>

Daniel James:

<!DOCTYPE html>
<html>
<head>
<style>
.content {
    margin: 0 auto;
    max-width: 800px;
    background: blue;
}
* html .a {
    float: left;
    margin-left: -400px;
    width: 50%;
}
* html .b {
    float: right;
    margin-right: -400px;
    width: 50%;
}
* html .content {
    float: left;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis
    pellentesque sem eget pulvinar. Aliquam at erat tellus. Sed non urna posuere sem
    auctor mollis condimentum ac sem. Vestibulum at eros eu odio laoreet dignissim a
    eget lacus. Etiam a posuere ante. Ut scelerisque libero a velit egestas
    suscipit. Fusce porttitor, risus bibendum eleifend sodales, nisl enim porttitor
    leo, vitae viverra sapien leo sit amet turpis. Proin ut tellus quis risus
    condimentum pellentesque eu eget arcu. Donec at dolor ut justo aliquam rutrum
    non tincidunt justo. Aliquam quam est, consequat sit amet porta a, mollis nec
    nibh. Duis pulvinar odio dapibus justo suscipit eu rhoncus eros semper. Fusce
    porttitor accumsan lectus eget dictum. Nam sed mauris tortor, eu condimentum
    magna. Quisque tellus justo, scelerisque ut interdum sit amet, ultrices a nisl. </div>
</body>
</html>

Daniel James: (percentage width attempt)

<!DOCTYPE html>
<html>
<head>
<style>
.content {
    margin: 0 auto;
    width: 70%;
    max-width: 800px;
    background: blue;
}
* html .a {
    float: left;
    margin-left: -571.42857px;
    width: 50%;
}
* html .b {
    float: right;
    margin-right: -571.42857px;
    width: 50%;
}
* html .c {
    float: left;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c">
    <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis
        pellentesque sem eget pulvinar. Aliquam at erat tellus. Sed non urna posuere sem
        auctor mollis condimentum ac sem. Vestibulum at eros eu odio laoreet dignissim a
        eget lacus. Etiam a posuere ante. Ut scelerisque libero a velit egestas
        suscipit. Fusce porttitor, risus bibendum eleifend sodales, nisl enim porttitor
        leo, vitae viverra sapien leo sit amet turpis. Proin ut tellus quis risus
        condimentum pellentesque eu eget arcu. Donec at dolor ut justo aliquam rutrum
        non tincidunt justo. Aliquam quam est, consequat sit amet porta a, mollis nec
        nibh. Duis pulvinar odio dapibus justo suscipit eu rhoncus eros semper. Fusce
        porttitor accumsan lectus eget dictum. Nam sed mauris tortor, eu condimentum
        magna. Quisque tellus justo, scelerisque ut interdum sit amet, ultrices a nisl. </div>
</div>
</body>
</html>

Well done to all and see you in the next quiz

[Raffles]

This is beautiful, very impressive. If only this had been discovered ~ 8 years ago! It's a shame about the empty elements that have to be used, but considering some hacks for IE6 that are around, it's still so very simple.

I wonder what's next?

[Erik J]

I was about to PM this version to Paul, asking why not the Opera min-height fix is working here. It eludes me, but perhaps any other than I can tell why Opera does not comply?

It is only the min-height tested in Opera 10.00 that is failing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Max/Min-width in IE6 on a sticky footer</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html{
	overflow-y:scroll; /* ALL; add an empty scrollbar */
}
html,
body{
	margin:0;
	padding:0;
	height:100%;
	font-size:100%;
	position:relative;
}
/* why does not the Opera min-height fix work here? */
body:before {
	float:left;
	margin-top:-30000px;
	height:100%;
	content:" ";
}
h1, p{
	margin:10px;
	text-align:justify;
	font-size:100%;
}
#wrapper{
	z-index:2;
	position:relative;
	margin:0 auto -50px;
	width:80%;
	min-width:600px;
	max-width:60em;
	min-height:100%;
	overflow:hidden;
}
#wrapper:before{
	float:left;
	margin-top:-100%;
	height:1%; /* IE8; a #wrapper min-height reminder */
	content:"";
}
#header{
	height:80px;
	background:#f99;
	overflow:hidden;
}
* html #sidebar{
	margin-right:-3px; /* IE6; the three pixel jog */
}
#sidebar{
	float:left;
	padding-bottom:50px;
	width:150px;
}
#content{
	display:inline-block; /* IE6; trip hasLayout */
}
#content{
	display:block;
	padding-bottom:50px;
	overflow:hidden;
}
* html #content{
	overflow:visible; /* IE6; the italic bug */
}
#footer{
	clear:both;
	z-index:1;
	position:relative;
	margin:auto;
	padding:1px 0;
	width:80%;
	min-width:600px;
	max-width:60em;
	height:48px;
}


/* fake column backgrounds and page borders */
#page-bg{
	z-index:-1;
	float:left;
	position:relative;
	bottom:-49px;
	margin:-9999px -10px 0;
	border:solid #ccc;
	border-width:0 10px;
	width:100%;
	height:9999px;
	background:#fcc;
}
#sidebar-bg{
	float:left;
	margin-top:-50px;
	width:150px;
	height:100%;
	background:#f66;
}
#footer-bg{
	clear:left;
	height:50px;
	background:#f99;
}
</style>


<!--[if IE 6]>
<style type="text/css">
/* IE6 extra style for the max/min-width */
#wrapper{
	height:100%;
	overflow:visible; /* allow IE6 to grow the height */
}
#footer .min-width-use{
	height:50px;
}
.max-width-left{
	float:left;
	margin-right:-30em; /* give space for half the max-width */
	display:inline;
	width:50%; /* what is left acts like a max-width buffer */
}
.max-width-right{
	float:right;
	display:inline;
	margin-left:-30em; /* give space for half the max-width */
	width:50%; /* what is left acts like a max-width buffer */
}
.min-width-set{
	float:left;
	display:inline;
	position:relative; /* keep the positioned child in stacking context (bugfix) */
	margin-left:600px; /* set the min-width buffer */
}
.min-width-use{
	display:inline-block; /* for hasLayout, float would shrinkwrap the content */
	position:relative; /* makes IE6 show the negative margin part (bugfix) */
	margin-left:-600px; /* use the min-width buffer */
}
</style>
<![endif]-->
</head><body>

<div id="wrapper">
<!--[if IE 6]>
<div class="max-width-left"></div>
<div class="max-width-right"></div>
<div class="min-width-set">
<div class="min-width-use">
<![endif]-->
	<div id="header"><p>Header</p></div>
	<div id="sidebar"><p>Sidebar</p></div>
	<div id="content">
		<h1>In this page IE6 is served extra CSS and HTML <em>but no javascript</em>. It is a centered 80% fluid width page with 60em max-width and 600px min-width. It has a sticky footer and two fake column backgrounds.</h1>
		<p><img style="float:left; margin-right:10px; background:red;" src="" width="150" height="150"></p>
		<p><img style="float:right; margin-left:10px; background:red;" src="" width="150" height="150"></p>
		<p>Lorem ipsum dolor sit amet consectetuer tempus justo ornare nec interdum. Tellus Sed nulla quis Nunc adipiscing laoreet ac sociis laoreet mauris. Sem id pellentesque tellus. Cursus augue vel id consequat sem justo Sed interdum ligula ut. Molestie egestas rutrum pede.</p>
		<p>Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. Platea mollis adipiscing quis in lacinia Vestibulum molestie sem sagittis id. Nibh Nam pede gravida magnis purus. Pretium nec ac eu et id id mollis Sed et elit.</p>
		<p>Rhoncus neque aliquam dolor id et natoque porttitor pellentesque sollicitudin enim. Dictumst turpis et sed. Tincidunt consectetuer massa mauris ut. Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. </p>
		<p>Bottom line</p>
	</div>
<!--[if IE 6]>
</div></div>
<![endif]-->
</div>

<div id="footer">
<!--[if IE 6]>
<div class="max-width-left"></div>
<div class="max-width-right"></div>
<div class="min-width-set">
<div class="min-width-use">
<![endif]-->
	<div id="page-bg">
		<div id="sidebar-bg"></div>
		<div id="footer-bg"></div>
	</div>
	<p>Footer</p>
	<!--[if lte IE 6]>
</div></div>
<![endif]-->
</div>

</body></html>

[Luki_be]

.l, .r {
    float:left;
    height:1px;
    width:50%;
    float:left;
    margin:0 -403px 0 0;
}

Isn't there a float:left to manny?

[Paul O'B]

Erik it's the overflow:hidden on #wrapper that is affecting opera for some reason. If you use the old clearfix it seems to work ok.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Max/Min-width in IE6 on a sticky footer</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html{
    overflow-y:scroll; /* ALL; add an empty scrollbar */
}
html,
body{
    margin:0;
    padding:0;
    height:100%;
    font-size:100%;
    position:relative;
}
/* why does not the Opera min-height fix work here? */
body:before {
    float:left;
    margin-top:-30000px;
    height:100%;
    content:" ";
}
h1, p{
    margin:10px;
    text-align:justify;
    font-size:100%;
}
#wrapper{
    z-index:2;
    position:relative;
    margin:0 auto -50px;
    width:80%;
    min-width:600px;
    max-width:60em;
    min-height:100%;
}
#wrapper:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
#wrapper{display:inline-block;}
/* mac hide \*/
#wrapper {display: block;}
/* End hide */
#wrapper:before{
    float:left;
    margin-top:-100%;
    height:1%; /* IE8; a #wrapper min-height reminder */
    content:"";
}
#header{
    height:80px;
    background:#f99;
    overflow:hidden;
}
* html #sidebar{
    margin-right:-3px; /* IE6; the three pixel jog */
}
#sidebar{
    float:left;
    padding-bottom:50px;
    width:150px;
}
#content{
    display:inline-block; /* IE6; trip hasLayout */
}
#content{
    display:block;
    padding-bottom:50px;
    overflow:hidden;
}
* html #content{
    overflow:visible; /* IE6; the italic bug */
}
#footer{
    clear:both;
    z-index:1;
    position:relative;
    margin:auto;
    padding:1px 0;
    width:80%;
    min-width:600px;
    max-width:60em;
    height:48px;
}


/* fake column backgrounds and page borders */
#page-bg{
    z-index:-1;
    float:left;
    position:relative;
    bottom:-49px;
    margin:-9999px -10px 0;
    border:solid #ccc;
    border-width:0 10px;
    width:100%;
    height:9999px;
    background:#fcc;
}
#sidebar-bg{
    float:left;
    margin-top:-50px;
    width:150px;
    height:100%;
    background:#f66;
}
#footer-bg{
    clear:left;
    height:50px;
    background:#f99;
}
</style>


<!--[if IE 6]>
<style type="text/css">
/* IE6 extra style for the max/min-width */
#wrapper{
    height:100%;
    overflow:visible; /* allow IE6 to grow the height */
}
#footer .min-width-use{
    height:50px;
}
.max-width-left{
    float:left;
    margin-right:-30em; /* give space for half the max-width */
    display:inline;
    width:50%; /* what is left acts like a max-width buffer */
}
.max-width-right{
    float:right;
    display:inline;
    margin-left:-30em; /* give space for half the max-width */
    width:50%; /* what is left acts like a max-width buffer */
}
.min-width-set{
    float:left;
    display:inline;
    position:relative; /* keep the positioned child in stacking context (bugfix) */
    margin-left:600px; /* set the min-width buffer */
}
.min-width-use{
    display:inline-block; /* for hasLayout, float would shrinkwrap the content */
    position:relative; /* makes IE6 show the negative margin part (bugfix) */
    margin-left:-600px; /* use the min-width buffer */
}
</style>
<![endif]-->
</head><body>

<div id="wrapper">
<!--[if IE 6]>
<div class="max-width-left"></div>
<div class="max-width-right"></div>
<div class="min-width-set">
<div class="min-width-use">
<![endif]-->
    <div id="header"><p>Header</p></div>
    <div id="sidebar"><p>Sidebar</p></div>
    <div id="content">
        <h1>In this page IE6 is served extra CSS and HTML <em>but no javascript</em>. It is a centered 80% fluid width page with 60em max-width and 600px min-width. It has a sticky footer and two fake column backgrounds.</h1>
        <p><img style="float:left; margin-right:10px; background:red;" src="" width="150" height="150"></p>
        <p><img style="float:right; margin-left:10px; background:red;" src="" width="150" height="150"></p>
        <p>Lorem ipsum dolor sit amet consectetuer tempus justo ornare nec interdum. Tellus Sed nulla quis Nunc adipiscing laoreet ac sociis laoreet mauris. Sem id pellentesque tellus. Cursus augue vel id consequat sem justo Sed interdum ligula ut. Molestie egestas rutrum pede.</p>
        <p>Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. Platea mollis adipiscing quis in lacinia Vestibulum molestie sem sagittis id. Nibh Nam pede gravida magnis purus. Pretium nec ac eu et id id mollis Sed et elit.</p>
        <p>Rhoncus neque aliquam dolor id et natoque porttitor pellentesque sollicitudin enim. Dictumst turpis et sed. Tincidunt consectetuer massa mauris ut. Consectetuer Mauris justo leo suscipit pharetra adipiscing et id orci tortor. Wisi velit dolor ultrices iaculis pulvinar. </p>
        <p>Bottom line</p>
    </div>
<!--[if IE 6]>
</div></div>
<![endif]-->
</div>

<div id="footer">
<!--[if IE 6]>
<div class="max-width-left"></div>
<div class="max-width-right"></div>
<div class="min-width-set">
<div class="min-width-use">
<![endif]-->
    <div id="page-bg">
        <div id="sidebar-bg"></div>
        <div id="footer-bg"></div>
    </div>
    <p>Footer</p>
    <!--[if lte IE 6]>
</div></div>
<![endif]-->
</div>

</body></html>

[Paul O'B]

Originally Posted by Luki_be

.l, .r {
    float:left;
    height:1px;
    width:50%;
    float:left;
    margin:0 -403px 0 0;
}

Isn't there a float:left to manny?

What do you mean?

Where?

[Luki_be]

In the declaration: two times float:left

.l, .r {
    float:left; <-----here
    height:1px;
    width:50%;
    float:left;
    margin:0 -403px 0 0;
}

ok lol - I didn't see that

[Rayzur]

The answer lies in negative margins once again combined with floats.

I can't believe I missed the location of the floats.

I was actually using that method in my first attempt at this, the problem was that I had them nested in the wrapping div and it didn't make sense when a width was set.

In the declaration: two times float:left

Luki be, It was just a typo.

[Luki_be]

Ray,

I was about 99,9999% sure that it was a typo but with these ingenious techniques i wanted to be sure

[Kravvitz]

Ah! Of course. It seems so obvious now. Congrats to those who figured it out!

By the way, there are overflow issues in FF1.0-2.0 in the max- and min-width combos (in both Paul's and Erik J's versions; the exact issue is different in each version though).

[kohoutek]

Fantastic solutions. Congrats, everyone!

I made so much noise about not wanting to be spoiled, only to not being able to participate at all. Oh, the irony. Ah well, there's a next time.

* off to study the solutions now *