Header - One Column Fixed Width Layout

One column, fixed width layout with a fixed header, footer and horizontal navigation bar. The layout will fit a screen width of 1024px and higher without the need for horizontal scrolling.

Return to layouts list...

Aenean luctus nisl aliquet est pretium consequat. Donec elementum aliquam libero, in faucibus ligula pellentesque sed. Nam justo lectus, feugiat eget condimentum eget, placerat vitae mauris. Proin aliquam euismod mi, id tempor nulla porta nec. Suspendisse consectetur blandit eros, ac iaculis enim facilisis cursus. Quisque at nunc quis sem imperdiet bibendum sit amet ut arcu. Suspendisse potenti. Vivamus ultrices diam eu purus scelerisque tempus. Etiam sed nisl eu dui placerat semper quis vel diam. Sed auctor molestie elementum. Sed nulla odio, porttitor at posuere porttitor, porta non dolor. In blandit pretium dapibus. Nam vel purus lorem. Ut varius velit non metus vestibulum consectetur.

Basic Code

HTML

  • <body>
    <div id="wrapper">
  • <header> <!--site name or logo goes in here-->
    </header>
  • <nav> <!--site navigation goes here -->
    </nav>
  • <section id="content"> <!--main site content goes in here-->
    </section>
  • <footer> <!--additional site info usually goes in here -->
    </footer>
  • </div> <!--end wrapper-->
    </body>

CSS

  • #wrapper{
    width: 960px; /*this size allows the content to fit monitors of 1024px width and greater without horizontal scrolling*/
    margin: 0 auto; /*positions the content in the centre of the page*/
    }
    header{
    background-color: #806d59;
    }
    nav{
    background-color: #a89888;
    }
    section#content{
    background-color: #fff;
    }
    footer{
    background-color: #806d59;
    }