.wrap { margin: 20px; } section { background: Pink; padding: 20px; position: relative; overflow: hidden; } .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; float: right; /*Needs to be floated to have height, not absolutely positioned*/ margin-bottom: -5000px; /*100% column height trick*/ padding-bottom: 5000px; /*100% column height trick*/ margin-left: -200px; /*Keep the sidebar in it's palce when floated*/ width: 200px; } .inner-sidebar { padding: 15px; } /*Just to make it pretty*/ .wrap { font: normal 13px/1.4 sans-serif; } header { margin: 0 0 20px 0; 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; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } .cf { zoom: 1; }
<div class="wrap"> <header> <h1> Fixed width and 100% height sidebar, px margins, all fluid </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 class="cf"> <div class="inner-sidebar"> <h2>Sidebar</h2> <ul> <li> The sidebar </li> <li> is not </li> <li> positioned absolutely </li> <li> so it has a height </li> <li> and is pushing </li> <li> the section </li> <li> as the content increses </li> <li> in it. </li> <li> List item number one </li> <li> List item number two </li> <li> List item number three </li> <li> List item number four </li> <li> List item number five </li> <li> List item number eight </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> And so on </li> <li> Last list item </li> </ul> </div> </aside> </section> </div>