Header - Two Column Flexible Width Layout

Two column, flexible width layout with a header, footer, vertical navigation and same height columns. 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.

Code

HTML

  • <body>
    <div id="wrapper"> <!--used to define the width of the content-->
  • <header> <!--holds the site name or logo-->
    </header>
  • <div id="container">
  • <nav><!--Left hand column-->
    </nav>
  • <section id="content"> <!--Right hand column-->
    </section>
  • </div> <!--end container-->
  • <footer> <!--additional site info usually goes in here-->
    </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*/
    margin:0 auto; /*positions the content in the centre of the page*/
    }
    header{
    background-color: #b1bdb6;
    color: #edebda;
    }
    #container{
    background: #fff;
    overflow: auto; /*clears the floats in the child elements */
    width: 100%
    }
    nav{
    width: 200px;
    float: left;
    background-color: #e7e4ce;
    margin-right:-200px; /*negative of section#content left border*/
    position: relative;
    }
    section#content{
    float: left;
    padding: 20px;
    border-left: 200px solid #e7e4ce; /* same width & background colour as nav - gives the impression of equal height columns */
    }
    footer{
    background-color: #b1bdb6;
    padding: 10px;
    }