Flexible width multiple columns & rows with a header, top navigation bar and footer. 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio est, aliquet sit amet rhoncus at, hendrerit at enim. Nulla suscipit enim ac lacus placerat vulputate facilisis dolor mattis. Etiam ullamcorper tempus ultricies. Nunc a neque vel felis consectetur consectetur eget ut lorem. Maecenas eros mauris, sollicitudin at vestibulum eu, adipiscing vel nisl. Vivamus sem nulla, mollis quis aliquam viverra, adipiscing sit amet turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus purus eget tortor cursus id varius felis eleifend.
Left Column - Morbi fringilla massa nec magna tristique congue. Fusce sed ante consectetur metus hendrerit tincidunt. Integer placerat tortor id mi rhoncus convallis. Morbi vestibulum, metus a porttitor porta, purus massa semper sem, id adipiscing tellus diam a ante. Donec dignissim auctor eros, eget tempor leo porta eu. In sed nulla et tortor lobortis rhoncus.
Center Column - Donec dignissim auctor eros, eget tempor leo porta eu. In sed nulla et tortor lobortis rhoncus. Vivamus ut diam vitae lectus convallis posuere et non felis. Donec sit amet enim a lacus consequat sagittis in sit amet purus. Cras ut magna non ipsum ullamcorper tristique. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Right Column - Aliquam sem diam, commodo non bibendum non, laoreet laoreet velit. Maecenas sapien tellus, faucibus pretium vulputate ut, ultrices quis tortor. Sed porttitor ante a erat ornare facilisis. Integer pulvinar, lectus quis adipiscing tempus, elit tellus rutrum nisl, nec cursus felis nibh nec lectus. Morbi tincidunt eleifend erat, sed porttitor nisi lobortis quis. Nullam odio lorem, faucibus ac facilisis condimentum, egestas in nulla.
Morbi suscipit ligula at turpis suscipit aliquam tincidunt lorem lacinia. Duis rutrum suscipit odio a ultricies. Vestibulum eleifend ornare felis, in rutrum dolor laoreet in. Aenean pharetra augue non enim interdum fermentum. Quisque ut lectus id augue mattis fringilla.
Code
HTML
- <body>
<div id="wrapper"> <!--used to define the width of the content-->- <nav> <!--Navigation goes in here - if you use this space for something else use a different element name, nav is intended solely for navigation-->
</nav>- <header> <!--Site's name and / or logo goes in header -->
</header>- <section class="full-content"> <!--full width section-->
</section>- <section id="columns"> <!--used to contain the three floated columns-->
- <article id="columns-left"> <!--left hand column-->
</article>- <article id="columns-center"> <!--centre column-->
</article>- <article id="columns-right"> <!--right hand column-->
</article>- </section> <!--end of the three floated columns-->
- <section class="lower-content"> <!-- full width section -->
</section>- </div> <!--end wrapper-->
- <footer>
</footer>- </body>
CSS
- body{
background-color: #d8d4ba;
}- #wrapper{
width: 90%; /*The content will fill 90% of the screen horizontally*/
margin: 0 auto; /*positions the content in the centre of the page*/
background: #f3f2ed;
}- nav{
background-color: #aeaf97;
}- header{
background-color: #b1bdb6;
color: #edebda;
}- section.full-content{
padding: 10px;
}- section#columns{
overflow: auto; /*clears the floats used in the child elements*/
width: 100%;
padding: 10px;
}- article#columns-left, article#columns-center, article#columns-right{
width: 30%;
float: left;
padding: 10px 15px 0 15px;
}- footer{
margin: 10px;
}