Header - Three Column Fixed 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.

Aliquam sit amet pulvinar mauris. Vestibulum vehicula massa at nunc luctus adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam et dui erat, sit amet fringilla orci.

Sed aliquam luctus ante. Pellentesque pharetra pharetra adipiscing. Aenean metus justo, egestas ut dignissim id, lacinia et tellus. Fusce vel lectus nisi, a elementum sem. Fusce dapibus consequat magna sed sollicitudin. Donec aliquet, nisi id commodo placerat, lacus ligula volutpat enim, a viverra eros sapien ut augue. Fusce id vestibulum orci.

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: 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: #b1bdb6;
    }
    #container{
    background-color: #fff;
    overflow: auto; /*clears the floats used in the child elements*/
    width: 100%
    }
    nav{
    width: 150px;
    float: left;
    background: #e7e4ce;
    margin-right: -150px; /* negative of the width */
    position: relative;
    }
    section#content{
    float: left;
    border-left: 150px solid #e7e4ce; /*same width & colour as the left hand column (nav)*/
    border-right: 200px solid #e7e4ce; /*same width & colour as the right hand column (section#right)*/
    }
    section#right{
    width: 200px;
    float: left;
    background: #e7e4ce;
    margin-left: -200px; /*negative of the width*/
    position: relative;
    }
    footer{
    background-color: #b1bdb6;
    }