<ul class="column">
  <!-- повторяющийся элемент списка -->
  <li>
  <div class="block">
  <!-- контент -->
  </div>
  </li>
  <!-- конец повторяющегося элемента -->
</ul>

ul.column{
  width: 100%;
  padding: 0;
  margin: 10px 0;
  list-style: none;
}
ul.column li {
  float: left;
  width: 200px; /* ширина колонки по умолчанию */
  padding: 0;
  margin: 5px 0;
  display: inline;
}
.block {
  height: 355px;
  font-size: 1em;
  margin-right: 10px; /* отступ между колонками */
  padding: 20px;
  background: #e3e1d5;
}
.block h2 {
  font-size: 1.8em;
}
.block img {
  /* параметры для изображений с меняющимися размерами и бордюром */
  width: 89%; /* убираем 1% от ширины, чтобы предотвратить баг в IE6 */
  padding: 5%;
  background:#fff;
  margin: 0 auto;
  display: block;
  -ms-interpolation-mode: bicubic; /* предотвращение пикселизации изображений в IE 6/7 */
}

function smartColumns() { //функция, подсчитывающая ширину колонок

  //сброс ширины строки до 100% после изменения размера экрана
  $("ul.column").css({ 'width' : "100%"});

  var colWrap = $("ul.column").width(); //определяем ширину строки
  var colNum = Math.floor(colWrap / 200); //определяем, сколько столбцов в 200px вместится в строку и округляем число до целого
  var colFixed = Math.floor(colWrap / colNum); //ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки

  $("ul.column").css({ 'width' : colWrap}); //ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях экрана
  $("ul.column li").css({ 'width' : colFixed}); //ставим точную ширину измененным столбцам

}

smartColumns(); //запускаем функцию после загрузки страницы

$(window).resize(function () { //запускаем функцию после каждого изменения размера экрана
  smartColumns();
});