Min-width discussions

HTML & CSS
2

Hi Jason,
I understand your frustrations with the op’s code and yes I would have taken a completely different approach to the code also.

In the example you posted above you have got around setting a BG color/image on the top black bar by setting that as the BG image on the body. That’s fine, but let’s say that is not how we want to utilize the body BG property. And yes, I know a black stripe could be added to the top of any BG image but it would cause problems if it were a repeat-y image.

The reason for setting min-width on a full width header with a page that has a fixed width wrapper is to keep the header’s BG color from stopping short when a horizontal scrollbar is induced. There are times when you don’t even need to set width:100% along with the min-width value since it defaults to width:100% anyways. A lot of times width:100% is used as a haslayout trigger. In the case of a sticky footer layout with full width header & footer heights are required on them and that will take care of haslayout. Either way (with or without width:100%) a min-width is needed to keep the BG color from stopping short when the page scrolls to the side.

By the way, nice job on the recode. But it is not a sticky footer layout that mistaya was wanting.

Take this code below and run it in your browser. Then reduce the viewport width to the point where the fixed width wrapper div produces a horizontal scrollbar. Now you will see that the header/footer BG leaves a gap on the right when it scrolls left.

I have disabled the min-widths, after you view the page then enable the min-widths and you will see what it is all about.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Full Width Header &amp; Footer</title>

<style type="text/css">
h1,h2 {
    margin:0; 
    padding:10px 10px 0; 
    text-align:center;
}
p {margin:10px;} 

body {   
    background:#E8E8F4;
    font:100% arial,"trebuchet ms",tahoma;
    margin:0;
    padding:0;
}  
html,body{
    height:100%; 
}
/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix (Maleika)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#content:after { /* #content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/
    font-size:0;
}
 
#header {
    [COLOR=Red]/*min-width:800px;*/[/COLOR]
    height:99px;/*100px with border*/
    position:relative;
    z-index:1; /*lay it on top the main wrapper*/
    border-bottom:1px solid #000;
    background:#959595;
    font-size:.8em;
}
* html #wrapper{height:100%;} /* is "min-height" in IE6 */

#wrapper {
    width:800px;
    margin:0 auto;
    margin-top:-100px; /* now pull it back up under header (same as header height)*/
    min-height:100%;
    background: #CCC;
    border-left:1px solid #000;
    border-right:1px solid #000;
}
#content {
    padding:100px 0 60px; /*set a top and bottom padding to preserve the header and footer */
    width:100%;/*haslayout*/
}
#footer {
    margin:-60px auto 0; /* a negative top margin pulls the footer up into viewport*/[COLOR=Red]
    [COLOR=Red]/*min-width:800px;*/[/COLOR][/COLOR]
    height:59px;/*60px total (a sticky footer needs a fixed height to work properly)*/
    border-top:1px solid #000;
    background:#959595;
}
#footer p{
    font-weight:bold;
    text-align:center;
}
</style>
</head>
<body>    
    
<div id="header">
    <h1>Full Width Header &amp; Footer<br> with Sticky Footer</h1>
</div>

<div id="wrapper">   
    <div id="content">
    <h2>Page Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
        lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
        adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
        sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
        lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
        adipiscing mauris, a nonummy diam ligula ut risus.</p> 
    </div>
</div>

<div id="footer">
    <p>Footer Stuff</p>
</div>  
 
</body>
</html>