Adaptive float fixing

A common problem faced by many web developers is how to correctly handle a series of floated, margined elements inside a fixed width container. In case that doesn’t make sense, take a look at the grid of Flickr images on our homepage. Here we have a series of list items floated left inside an unordered list. The usual way of handling these might be to float all the list items left, add a margin to the bottom and right, and then add a class of something like .end to the last item in each row, to remove the right margin and preventing it from breaking.

The markup and CSS might be something like:

<ul id="images">
  <li><a href="#"><img src="/img/001.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/002.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/003.jpg" alt="" /></a></li>
  <li class="end"><a href="#"><img src="/img/004.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/005.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/006.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/007.jpg" alt="" /></a></li>
  <li class="end"><a href="#"><img src="/img/008.jpg" alt="" /></a></li>
</ul>

#images{
  width:460px;
  overflow:hidden; /* This coupled with a width clears the floats -- as per http://csswizardry.com/floats/ */
}
#images li{
  width:100px;
  height:100px;
  float:left;
  margin:0 20px 20px 0; /* Note: margin applied bottom and right */
}
#images .end{
  margin:0 0 20px 0;
}

This would give you a box-model overview like this:

This works perfectly well, the margin-right is removed and everything stacks up and lines up perfectly. However…

If you populate this list dynamically, like we do with our Flickr images, you need a script to work out the position of the end item (in this case 4th) and write out the .end class. Whilst not impossible, it’s certainly more work than is necessary. Also, if you ever decide you want to have 6 items per row, you would need to alter your script accordingly to add a class to the 6th item instead.
Furthermore, the .end class is both ugly and insemantic (and, after using the method I’m about to outline, totally extraneous).

The code

<ul id="images">
  <li><a href="#"><img src="/img/001.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/002.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/003.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/004.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/005.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/006.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/007.jpg" alt="" /></a></li>
  <li><a href="#"><img src="/img/008.jpg" alt="" /></a></li>
</ul>

#images{
  width:480px; /* Width of element plus one times the width of the margins (460 + 20 = 480) */
  margin-left:-20px; /* Width of one times the margins */
  overflow:hidden; /* This coupled with a width clears the floats -- as per http://csswizardry.com/floats/ */
}
#images li{
  width:100px;
  height:100px;
  float:left;
  margin:0 0 20px 20px; /* Note: margin now applied bottom and left */
}

N.B. Substitute every instance of 20px here with whatever your margin size is.

This works far nicer. What we do here is put all the margins on the left, whch pushes everything over to the right by 20 pixels too much. It also makes the ul itself 20px wider than it needs to be. To undo the effects of this we set the width of the ul to 20px more than we want, then pull the entire ul back over to the left by the same 20px.

The box-model overview is thus:

This method completely negates the need for an .end class and means you can just keep on adding list items without ever having to worry about things breaking!

July 15th, 2010 by Harry Roberts in Web Development.

CSS HTML

Harry Roberts

Harry is a web developer and designer specialising in accessibility, usability, UX and semantics as well as CSS, xHTML and mobile web development. He has a keen eye for detail, is a web standards advocate, grid enthusiast and total type geek.

Read all posts by Harry Roberts