Fixed width sidebar in a fluid layout

The sidebar stays fixed width, the margins stay fixed width and it's still fluid. Boom!

by andy_h

HTML

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

CSS

.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;}