Fixed Position Header

by Kyle Mitofsky

HTML

<div id="header">Header Info</div>
<div id="content">
    <img src='http://i.imgur.com/Fl33AV8.png' ></img>
</div>






<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    Further Reading: <a href='http://stackoverflow.com/a/10975357/1366033'>position fixed header in html</a>
<div>

CSS

#header {
    position:fixed; /* fixing the position takes it out of html flow - knows
    				   nothing about where to locate itself except by browser
    				   coordinates */
    left:0;			/* top left corner should start at leftmost spot */
    top:0;			/* top left corner should start at topmost spot */
    width:100%;		/* take up the full browser width */
    z-index:200;	/* high z index so other content scrolls underneath */
    height:100px; 	/* define height so you can define for content */
    background-color:brown; /* otherwise content underneath will be visible */
}
#content {
    min-height:100%;
    width:960px;
    margin:0 auto;
    margin-top:130px; /* add top margin so doesn't hide under header */
}