Header - One Column Flexible Width Layout

One column, flexible width layout with a header, footer and horizontal navigation bar. The layout will scale to fit any screen width, but has a maximum width of 1200px set to make the content easier to read on large monitors.

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">
    <!--used to define the width of the content-->
  • <header> <!--contains the site name and or logo-->
    </header>
  • <nav> <!-- site navigation -->
    </nav>
  • <section id="content"> <!-- main site content-->

    </section> <!--end content-->

  • <footer> <!--addition info usually goes in the footer-->
    </footer>

  • </div> <!--end wrapper-->
    </body>

CSS

  • #wrapper{
    width: 90%; /*The content will fill 90% of the screen horizontally, you can change this to 100% or a lower percentage to suit your needs*/
    max-width: 1200px; /*the content won't be bigger than 1200px as having too wide a content makes it hard to read (NB, not supported by IE6 & earlier)*/
    margin: 0 auto; /*positions the content in the centre of the page*/
    }
    header{
    background-color: #b1bdb6;
    }
    nav{
    background-color: #e7e4ce;
    }
    section#content{
    background-color: #fff;
    }
    footer{
    background-color: #b1bdb6;
    }