На моей памяти существует всего два основных, неглючных, способа блочной верстки
(без использования таблиц). О них и пойдет речь в данной статье.
Первый
способ основывается на использовании CSS-свойства «display» со значениями,
симулирующими поведение элементов таблицы, а именно: display:table,
display:table-row и display:table-cell.
Этот способ работает идеально во всех
браузерах, которые поддерживают подобные значения для свойства display, а это
основная масса браузеров, кроме нашего «фаворита» Internet Explorer. До 8-й
версии IE не поддерживал полностью как CSS 2.1, так и CSS 3.
Поэтому, чтобы
исправить ситуацию, пришлось найти «очередной хак для IE». И этим хаком стали
свойства float:left и clear:right. Благодаря ним, блоки в IE прилипают друг к
другу и не скачат. Но это не полноценная замена display:table, что будет заметно
в некоторых случаях. Этот способ прост в применении, но советую его применять
лишь тогда, когда ширина ячеек (блоков) задается в процентах.
Собственно, сам
код:
<style type="text/css">
.table { width:100%; display:table; }
.tr { display:table-row; clear:both; }
.td { display:table-cell; vertical-align:top; height:100%; //float: left; //clear:right; //overflow:hidden;
/* скрываем содержимое, если оно будет выходить за границы ширины ячейки */ }
</style>
<div class="table">
<div class="td" style="width:15%; background:#E7E0D1">
Левая колонка, 15%
</div>
<div class="td" style="width:60%;">
<span style="display:block; padding:0 20px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</span>
</div>
<div class="td" style="width:25%; background:#D6E2DE">
Правая колонка, 25%
</div>
</div>
Стоит отметить, что этот способ лучше работает в IE,
когда на странице не указан доктайп. В этом случае, во-первых, в IE меняется
блочная модель и если мы укажем отступы (padding) на ячейки нашей «таблицы», то
отступы не будут раздвигать блоки по ширине (кстати, по логике вещей так и
должно быть в остальных браузерах, непонятно почему W3C, или кто-там
разрабатывает стандарты, считает иначе).
И во вторых, если мы на класс .table
повесим высоту, например 1%, а с .td уберем overflow:hidden, то все блоки
(ячейки) будут «тянуться» по высоте родительского блока, точно также, как при
использовании таблиц.
О втором безглючном блочном способе верстки (думаю
вы понимаете о чем я), я узнал сравнительно недавно, и то случайно, наверное
потому, что никогда не ожидал таких «выкрутасов» от, казалось бы, безобидного
overflow:hidden.
Поведение блока с width:auto и overflow:hidden, вместе с
рядом стоящими блоками с «float», для меня было неожиданностью. Итак этот метод,
еще проще чем предыдущий: мы просто расставляем «плавающие» блоки по сторонам
(влево и вправо), указываем нужную ширину, и после всех этих блоков добавляем
основной блок с автоматической шириной (по умолчанию) и overflow:hidden. И всё
работает как надо!
Для блоков с float:left можно также добавить clear:right,
чтобы они не прыгали в IE друг под друга, при совсем малой ширине окна браузера.
Благодаря overflow:hidden, теперь, чтобы не происходило внутри блока, он ведет
себя как пологается (до этого я сталкивался с глюками, когда при использовании
«clear» весь контент после него «прыгал» вниз до высоты плавающих
блоков).
Также, в этом способе можно удобно задавать отступы, без
необходимости добавления дополнительных внутренних обрамляющих блоков. Все эти
блоки лучше обрамить в один контейнер с position:relative и zoom:1 (включает
режим hasLayout в IE 6 и иногда помогает в борьбе с глюками).
В итоге,
получившийся код мы наблюдаем ниже:
<style type="text/css">
.contents { position:relative; zoom:1; }
.left { width:15%; float:left; }
.right { width:250px; float:right; }
.center { position:relative; overflow:hidden; zoom:1; padding:0 20px; }
</style>
<div class="contents">
<div class="left" style="background:#EFE4EE"> Левая колонка, шириной 15% </div>
<div class="right" style="background:#F9F1EE"> Правая колонка, шириной 250px </div>
<div class="center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br clear="all" />
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
|
