# Fluid multi column layout revisited

This is part two of the earlier post about a fluid multi-column layout made with
only floats.

You may want to
[read the earlier post first](/fluid-multi-column-layout-where-sidebar-and-margins-stays-fixed-width-without-javascript).

Here’s what we’re doing:

[iframe](//jsfiddle.net/andy_h/668Fu/14/embedded/result,css,html/)

In the
[earlier one](/fluid-multi-column-layout-where-sidebar-and-margins-stays-fixed-width-without-javascript),
the requirements were as such:

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

They also apply to this version, plus a few additions:

- Sidebar needs to be 100% in height all the time, no image hacks.
- Sidebar cannot be `position: absolute;`.

Here’s a little trick for getting a 100%-height sidebar with no images:

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

**Why don’t we want the sidebar to be positioned absolutely?** Because we want
it to have a height, absolutely positioned elements don’t have height, so to
speak. They have physical height but they won’t occupy any space in a layout.
And, we need it to occupy space.

The old css for the sidebar:

```css
aside {
  background: Aquamarine;
  height: 350px;
  /* Not good for us in this case */
  position: absolute;
  right: 20px;
  top: 74px;
  width: 200px;
}
```

CSS for the new:

```css
aside {
  background: Aquamarine;
  /* Needs to be floated to have height, not absolutely positioned */
  float: right;
  /* Sufficiently large value */
  margin-bottom: -5000px;
  /* Keep the sidebar in it’s place when floated */
  margin-left: -200px;
  /* Sufficiently large value */
  padding-bottom: 5000px;
  width: 200px;
}
```

Now we have a layout that behaves rather nicely.

- If the content in the sidebar exceeds the height of the columns, it will
  simply push its wrapping element larger.
- The sidebar is 100% in height all the time, even when it has less content than
  the columns heights.