Следующий шаг – создание «резинового» макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим HTML-разметку, которую будем в дальнейшем форматировать. По-моему это даже проще, чем одноколоночный макет…
Итак, зададим HTML-разметку:

<div id="header">
... шапка страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="otherbar">
... колонка меню ...
</div>
<div id="footer">
... подвал ...
</div>

и отформатируем ее с помощью следующей таблицы стилей:

#content {
  float:left;
  width:50%;
  background-color:#CCC;
}
#sidebar {
  float:left;
  width:30%;
  background-color:#FFC;
}
#otherbar {
  float:left;
  width:20%;
  background-color:#FFC;
}
#header {
  background-color:#FCF;
  text-align:center;
}
#footer {
  clear:both;
  text-align:center;
  background-color:#CFF;
}

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Вот так легко и просто. Этот метод работает во всех популярных браузерах.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal