Full Width Header and Footer with CSS

One of the more popular designs the past year or so has been to make your header and footer span the entire width of the screen regardless of screen size. Whether using a solid color or a patterned background, it’s popular right now.

Not sure how to write the code so the backgrounds go the full width of the window but the content stays centered in the middle? Let me show you.

The CSS
<style>
.wrap {
position:relative;
margin:0 auto;
/*replace 990px with your width*/
width:990px;
}

#CMHeader, #CMFooter {
width:100%;
background:#243448;
}
#CMHeader {
/*change or remove as necessary*/
height:510px;
}
#CMFooter {
/*change or remove as necessary*/
height:200px;
}
</style>

The Header code:
<div id=”CMHeader”>
<p>Content Here</p>
</div><!– end CMHeader –>

The Footer code:
<div id=”CMFooter” >
<p>Content Here</p>
</div><!– end CMFooter –>

Now your header and footer will span the entire width and your content will stay centered in the middle of the page. If you want the center body of the website where all your content is to have a background the same way, just follow the same procedure with another ID.

CSS code has come a long ways since the early 2000s and is really the foundation to coding a great looking site. If you aren’t proficient in CSS, look for more tutorials online or purchase a beginners book as CSS is extremely powerful and will make your life a lot easier in the future and others who work on the same site.