clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

Fluid multi column layout revisited

Filed under: HTML/CSS— Tagged with: layout

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.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!