Originally Posted by
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.
Thanks!!! I was loosing track all the time. 
Originally Posted by
Kravvitz
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).
Maybe the revised version has no issues?
HTML Code:
<!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 Fluid Page with 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%;
}
body:before { /* Opera; resized min-height trigger */
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:auto;
width:80%;
min-width:600px;
max-width:60em;
min-height:100%;
text-align:left;
}
* html #wrapper{
height:100%; /* IE6; content will grow the height */
}
#header{
height:80px;
background:#f99;
overflow:hidden; /* avoid margin collapse */
}
* html #sidebar{
margin-right:-3px; /* IE6; the three pixel jog */
}
#sidebar{
float:left;
width:150px;
}
#content{
overflow:hidden; /* clear adjacent float */
}
* html #content{
display:inline-block; /* IE6; trip hasLayout */
overflow:visible; /* IE6; the italic bug */
}
#clearfooter{
clear:both;
padding-bottom:50px;
height:0.01%; /* IE8; resized min-height trigger */
font-size:0;
}
#footer{
z-index:1;
position:relative;
margin:-50px auto 0;
padding:1px 0; /* avoid margin collapse */
width:80%;
min-width:600px;
max-width:60em;
height:48px;
}
/* fake column backgrounds and page borders */
#page-bg{
float:left;
z-index:-1;
position:relative; /* Opera; extended scroll if AP */
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;
}
/* IE6 extra style for the max-width and min-width */
* html .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 */
}
* html .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 */
}
* html .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 */
}
* html .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>
</head><body>
<div id="wrapper">
<!--[if lte 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>
<div id="clearfooter"></div>
<!--[if lte IE 6]>
</div></div>
<![endif]-->
</div>
<div id="footer">
<!--[if lte 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>
: *Apart from percentage widths*, I strongly believe that there is no way to mimic a combination of 'width' and 'max-width' in IE6 using only HTML and CSS 
. (For example, I can't see a usable way of using the container to restrict the width of the inner content box, since it interferes with what happens after the max-width is reached.) Of course, the use of margins in this percentage technique will cause more work or problems if other parts of the layout want to legitimately occupy that margin space.
Bookmarks