Fluid multicolumn layout

With a fixed with 100% height sidebar.

by andy_h

HTML

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

CSS

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