We would like to know how to create a page with header footer and content area.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}<!-- w w w . j a va 2 s .c o m-->
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
The code above is rendered as follows: