header and footer

header and footer

by Steven Martin

HTML

<div id="container">
    <div id="header">Header!</div>
    <div id="footer">Footer!</div>
</div>

CSS

#container {
    position: absolute;
    margin:auto;
    background-color:#addadd;
    width:500px;
    height:500px;
    border:2px solid blue;
}
#header {
    position: absolute;
    background-color:orange;
    top: 0;
    width:500px;
    height:20px;
    border-bottom: 2px solid blue;
    text-align:center;
}
#footer {
    position: absolute;
    bottom: 0;
    background-color:pink;
    border-top: 2px solid blue;
    width:100%;
    height:20px;
}