Header - Three Column Flexible Width Layout

Three 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.

Basic 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"> <!--centre column-->
    </section>

    <section id="right"> <!--right hand column-->
    </section>

    </div> <!--end container-->

    <footer>
    </footer>

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

CSS

  • #wrapper{
    width: 90%; /*The content will fill 90% of the screen horizontally*/
    margin: 0 auto; /*positions the content in the centre of the page*/
    }
    header{
    background-color: #b1bdb6;
    }
    #container{
    background-color: #fff;
    overflow: auto; /*clears the floats used in the child elements*/
    width: 100%
    }
    nav{
    width: 200px;
    float: left;
    background: #e7e4ce;
    margin-right: -200px; /* negative of the width */
    position: relative;
    }
    section#content{
    float: left;
    border-left: 200px solid #e7e4ce; /*same width & colour as the left hand column (nav)*/
    border-right: 350px solid #e7e4ce; /*same width & colour as the right hand column (section#right)*/
    }
    section#right{
    width: 350px;
    float: left;
    background: #e7e4ce;
    margin-left: -350px; /*negative of the width*/
    position: relative;
    }

    footer{
    background-color: #b1bdb6;
    }