<div class="wrap"> <header> <h1> Fixed width sidebar in a fluid layout </h1> </header> <section> <div class="article-wrap"> <article> <div class="inner-article"> <p>The sidebar stays fixed width, the margins stay fixed width and it's still fluid. Boom! </p> <p>Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p> </div> </article> <article> <div class="inner-article"> <p> Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </article> <article class="last"> <div class="inner-article"> <p> Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </article> </div> <aside> <div class="inner-sidebar"> <h2>Sidebar</h2> <ul> <li> Some sort of a menu </li> <li> List item 2 </li> <li> List item number three </li> </ul> </div> </aside> </section> </div>
.wrap{width:100%;} section{font:normal 13px/1.4 sans-serif; margin:20px;} .article-wrap{margin:0 193px 0 0;} article{float:left; width:33%;} .inner-article{background:LightGoldenRodYellow; margin:0 20px 0 0; padding:10px;} aside{background:Aquamarine; height:350px; position:absolute; top:74px; right:20px; width:200px;} .inner-sidebar{padding:15px} /*Just to make is pretty*/ header{margin:20px; width:100%;} h1{font:bold 25px/1.4 sans-serif;} h2{font:bold 18px/1.4 sans-serif;} p{margin:10px;} ul{list-style:disc; margin:0 0 0 17px;}