How to align Header and Footer at the top and bottom of the screen

Posted by: Amit Nazare on: September 16, 2009

• In: CSS | HTML | Tutorials
• Comment!

As we all know aligning header at the top is as easy as saying it. Always the first div tag or a table td tag will appear at the top, so no question of aligning the header at the top. But how about aligning footer at the bottom always even when seen under different resolutions. Yes even that is easy. Follow these steps and make it working for you guys.

Here is how you can do it, check for the HTML/CSS code.

HTML Code:

<div id=”wrapper”>
<div id=”header”>
Some heading goes here…
</div>
<div id=”content”>
<p>Some Description goes here…</p>
<p>Some Description goes here…</p>
<p>Some Description goes here…</p>
<p>Some Description goes here…</p>
<p>Some Description goes here…</p>
</div>
</div>
<div id=”footer”>
Copyright content goes here
</div>

CSS Code:

<style type=”text/css” >
*{
margin:0;
padding:0;
}
html, body{
height:100%;
}

#wrapper{
border:0 none;
margin:0 auto;
min-height:100%;
width:900px;
}
#header{
border:1px solid #c0c0c0;
height:50px;
width:900px;
text-align:center;
background-color:#CCCCC2;
}
#content{
padding:10px;
width:880px;
border:1px solid #c0c0c0;
}
#footer{
background-color:#CCCCC2;
border:0 none;
height:35px;
margin:-45px auto 0;
padding:10px 0 0;
text-align:center;
width:900px;
}
</style>

Try this if you did not get it, let me know will work out for it.

Tags: footer align top, header align top