Full Length Header & Footer with Center Content Layout

Website Update of Emprise MediaWe just recently did a minor change to our website. Mostly it was an aesthetic touch we were going for. If you notice in the image of our previous design we had more of a center page feel. We decided to expand both the header and the footer to make it full length while keeping the centered part of our site. This gave room for the content to breathe a little without it coming so close to the edges. It certainly isn’t so cluttered.

In order to accomplish this layout I need to move the header outside of the wrapper. This is how the page look was achieved compared to the new full length layout. Then edited the header and footer content to this.

< div>
< class=”header”>
< div class=”wrapper” >
< div class=”content”>
< p> The Conent < div class=”footer”>
< div class=”colophon” id=”wrapper”>
< p> Content Footer

The CSS for the full page header and footer.
.wrapper, #colophon{
width:1080px;
margin: 0 auto;

}

#header, #footer {
width:100%;
margin:0 auto;
}

I am sure there are lots of ways to accomplish it but here it is. We are always looking for ways to improve. So I am sure you will see new features in the future.

About Derek Hanson

Derek Hanson is a digital strategist and founder of Emprise Media, a digital web design and internet marketing firm. You can connect with him on Google+, Twitter, and Linkedin.
This entry was posted in Website Design. Bookmark the permalink.