HTML Basic Layout

Layout with fiexed Header, fixed Footer and scrollable Content

by Toni

HTML

<div id="header">HEADER</div>
<div id="maincontent">
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
    TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />TEST<br />
</div>
<div id="footer">FOOTER</div>

CSS

#header {
			   position:absolute; top:0px; left:0px; height:50px; right:0px;overflow:hidden;
			   background-color:#cccccc;
			}
			#maincontent {
			   position:absolute; top:50px; bottom:50px; left:0px; right:0px; overflow:auto;
			   border:1px solid #ff0000;
			}
			#footer {
			   position:absolute; bottom:0px; height:50px; left:0px; right:0px; overflow:hidden;
			   background-color:#cccccc;
			}