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>
            Not good
        </h1>
    </header>
<section>
    <article>
        <p>
            The sidebar is fluid and lists in it wrap, bad. 
        </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>           
    </article>
    <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>
    </article>
    <article class="last">
        <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>      
    </article>
    <aside>
        <div class="inner-sidebar">
            <h2>Sidebar</h2>
            <ul>
                <li>
                    Some sort of a menu
                </li>
                <li>
                    List item 2
               ...

CSS

.wrap{width:100%;}
    section{font:normal 13px/1.4 sans-serif; margin:20px;}

aside{background:Aquamarine; height:350px; float:left; width:25%}
.inner-sidebar{padding:20px}

article{background:LightGoldenRodYellow; margin:0 3% 0 0; float:left; width:22%;}

/*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;}