Володя Новосибирский (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} private_face) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} ru_coding,@ 2007-10-08 13:28:00 |
|
Колонки с вертикальным выравниванием без таблиц.
6 октября в Техногретте был опубликован весьма зачетный способ создания колонок с вертикальным выравниванием по нижней границе без использования таблиц.
Однако обилие вложенных блоков в коде и объемный css может отпугнуть кого угодно, поэтому, я взял на себя смелость его несколько упростить.
Под катом решение. Прошу любить и тестить.
css:#columns, #columns .col, #columns .wrap { position: relative; }
#columns {
width: 50%;
display: table;
overflow: hidden;
}
#columns .col {
display: table-cell;
vertical-align: bottom;
width: 33%;
//top: 100%;
//clear: right;
//float: left;
}
#columns .wrap { //top: -100%; }
html:
<div id="columns">
<div class="col">
<div class="wrap">
<b>Делай раз!</b><br />Серпантинная волна естественно обретает септаккорд.
</div>
</div>
<div class="col">
<div class="wrap">
<b>Делай два!</b><br />Рыночная информация практически продолжает медиабизнес, осознавая социальную ответственность бизнеса.
</div>
</div>
<div class="col">
<div class="wrap">
<b>Делай три!</b><br />Бюджет на размещение традиционен.
</div>
</div>
</div>
