# Fluid multi column layout where sidebar and margins stays fixed width, without JavaScript

More fluid layout examples ahead. At first I thought this would need JavaScript,
but of course it does not.

I was working on a layout with a lot of narrow columns and a sidebar.
[First I did it like this](http://jsfiddle.net/andy_h/xThLt/15/).

Problems in that approach:

- Margins are defined as percentages, so they vary with the width of the window,
  we don't want that
- On low resolutions the sidebar gets too narrow and the list in it wraps, ugly.

What we want:

- Fluid width columns
- Static width sidebar
- Static width margins

[See in the fiddle what I mean →](http://jsfiddle.net/andy_h/xThLt)

[iframe](http://jsfiddle.net/andy_h/xThLt/embedded/result,html,css/)

## Elementary HTML and CSS

Here's what we're doing. Check the comments in the code.

The HTML:

```html
<!-- Wrapper in normal fashion -->
<div class="wrap">
  <!-- Normal header -->
  <header>
    <h1>Fixed width sidebar in a fluid layout</h1>
  </header>
  <!-- Apply the margin to this not the wrap -->
  <section>
    <!-- Give the columns a wrapper -->
    <div class="article-wrap">
      <article>
        <!-- Inner element to the columns -->
        <div class="inner-article">Some content here</div>
      </article>
      <article>
        <div class="inner-article">Some content here</div>
      </article>
      <article class="last">
        <div class="inner-article">Some content here</div>
      </article>
    </div>
    <aside>
      <!-- Inner element here also -->
      <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>
​
```

And the CSS:

```css
.wrap {
  width: 100%;
}

/* Margin in the inner wrapper */
section {
  font: normal 13px/1.4 sans-serif;
  margin: 20px;
}

/* Right margin width of the sidebar */
.article-wrap {
  margin: 0 193px 0 0;
}

/* Float the columns and give width depending on how many you have them */
article {
  float: left;
  width: 33%;
}

/* Apply margins and paddings to the inner element */
.inner-article {
  background: LightGoldenRodYellow;
  margin: 0 20px 0 0;
  padding: 10px;
}

/* Position the sidebar absolutely */
aside {
  background: Aquamarine;
  height: 350px;
  position: absolute;
  top: 74px;
  right: 20px;
  width: 200px;
}

/* Again paddings and margins in the inner element */
.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;
}
```

The key here is to wrap elements. Check the full code in the
[fiddle](http://jsfiddle.net/andy_h/xThLt/).