Адаптивная верстка (часть 1)

Расстановка блоков по всей ширине Метод построен, на изменении размера блока, можно также переделать что бы блоки были одной ширины а менялись отступы между блоками...

нтмл:

<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;
}

Скрипт:

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();
});

П.С. лень было набирать поэтому скопировал части кода тут