clubmate.fi

Fluid multi column layout revisited

This is part to two the earlier post about fluid multi-column layout done with only floats. You may want to get acquainted with that first.

Here’s what we’re doing:

In the earlier one, the requirements were as such:

• Fluid width columns
• Static width sidebar
• Static width margins

They also apply to this version, plus few added bullets:

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

Here’s a little trick how to get the 100% height sidebar with no images:

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:

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

CSS for the new:

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.