На хабре пошла дикая пьянка по поводу этих колонок. Так что ж, в припрыжку к этому и этому методам опишем ещё один.

<style type="text/css" media="screen">* {
    margin: 0;
    padding: 0;
  }
  #container {
    display: table;
    width: 100%;
  }
  .column {
    display: table-cell;
    width: 25%;
  }</style>
<!--[if lt IE 8]>
  <style type="text/css">
    #container {
      width: auto;
    }
    .column {
      // вся магия в двух строчках ниже
      float: left;
      clear: right;
      
      width: auto;
      min-width: 25%;
      _width: 25%;
    }
  </style>
<![endif]-->
<div id="container">
  <div class="column">25%</div>
  <div class="column">25%</div>
  <div class="column">25%</div>
  <div class="column">25%</div>
</div>

• Посмотреть Пример

В чем же суть, наверное просто процитирую:

Решение основано на глюке отличительной особенности браузеров IE5-7, которая выражается в том, что если блокам с float указать свойство clear с противоположным к float значением, то они перестают переноситься один под другой. Грубо говоря, блоки после такого просто «прилипают» друг к другу намертво и не «отлипнут» друг от друга уже ни при каких обстоятельствах.