Header - Two Column Fixed Width Layout

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

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 - if used for something other than navigation change its name-->
    </nav>
  • <section id="content"> <!--Right hand column-->
    </section>
  • </div> <!--end container-->
  • <footer> <!--additional site info can go in here -->
    </footer>
  • </div> <!--end wrapper-->
    </body>

CSS


  • #wrapper{
    width: 960px; /*this 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;
    color: #edebda;
    padding: 20px 10px;
    }
    #container{
    background: #fff;
    overflow: auto; /*clears the floats in the child elements */
    width: 100%
    }
    nav{
    width: 150px; /*this + [section#content width] + [nav left & right padding] + [section#content left & right padding] ‹= 960px*/
    float: left;
    background-color: #d8d4ba;
    margin-right:-150px; /*negative of section#content left border*/
    position: relative;
    }

    section#content{
    width: 750px; /*this + [nav width] + [nav left & right padding] + [section#content left & right padding] ‹= wrapper width*/
    float: left;
    padding: 20px;
    border-left: 150px solid #d8d4ba; /* same width & background colour as nav - gives the impression of equal height columns */
    }
    footer{
    background-color: #806d59;
    padding: 10px;
    }