Полезные заметки по веб-программированию PHP, Symfony, Propel, Doctrine, JS, jQuery, ExtJS, HTML, CSS, …

Блочная верстка на дивах – 3 колонки

Posted on Февраль 11, 2011


Постоянная проблема - валидная и кросбраузерная верстка. А если еще и на дивах, то задача еще более усложняется.
Итак, в этой заметке, небольшой пример, как сделать верстку в 3 колонки.

.left {float: left; width: 200px;}
.right {float: right; width: 240px;}
 
.cell {margin-left:200px;}
.middle {margin-right:240px;}
 
.clear {clear: both;}

<div class="table">
  <div class="left">left/div>
  <div class="cell">
    <div class="right">right</div>
    <div class="middle">middle</div>
  </div>
</div>
<div class="clear"></div>

Если не ошибаюсь, то техника называется, двойного чего-то там...
Верстка получается более менее кросбраузерная, но в то же время есть некоторые ньюансы. Например, если требуется сделать блоки одинаковой высоты.

Комментарии (0) Пинги (0)

Пока нет комментариев.


Leave a comment

Нет обратных ссылок на эту запись.