Как сверстать данный шаблон?

Question

[Георгий]

Привет всем, кто это читает :)
Есть шаблон с вот таким расположением блоков:


Дело в том, что высота среднего может меняться так как там внутри текст. Хочется чтобы высота у столбцов была одинаковая… Не могу приложить ума каким образом сверстать такое.

Заранее благодарю :)

Comments

[Георгий]

Отделение блоков :)

Answer 1

[Андрей]

http://jsfiddle.net/5Kzrk/

На кроссбраузерность не проверял, но должно работать

Идея в том, что нужно тянуть левый нижний, правый нижний и центральный блоки

Comments

[shvedovka]

Отличное решение.

[Георгий]

Действительно отличный способ, но такое не прокатит, если я хочу не левый нижний и правый нижний увеличивать, а разрыв между левыми и правыми…

Answer 2

[gaelpa]

csstemplater.com/ — это первое, что нашел по запросу «layout generator».

Comments

[Георгий]

Мне бы просто метод, остальное я сам…
Таблицами к примеру не получится так как разделение правого столбца ниже, чем у левого…

[Stdit]

Получится и таблицей, если таблица из одной строки и трёх ячеек, в которые вложены три незавивимых друг от друга куска дивной вёрстки.

[Nesvet]

Ну почему же нельзя таблицами? Можно. Прикрепил решение.

[gaelpa]

Так он выдает «голый» цсс, из которого можно понять метод.

Answer 3

[Сергей Соколов]

1. три колонки одинаковой высоты, например;
2. в боковых применить технику, как для приклеенного к низу футера.

Ну, или таблицами: в боковые вложить ещё по таблице.

Answer 4

[Nesvet]

Можно таблицей. Например, так:

HTML:

<table>
    <tbody>
        <tr>
            <td rowspan="4">1</td>
            <td rowspan="7">2</td>
            <td rowspan="5">3</td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
            <td rowspan="3">4</td>
        </tr>
        <tr>
            <td rowspan="2">5</td>
        </tr>
        <tr></tr>
    </tbody>
</table>​

CSS:

table {width: 100%}
tr {height: 50px}
td {border: 1px solid black}​

jsfiddle.net/zXNGR/

Comments

[Stdit]

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

[Nesvet]

Это я в ответ на комментарий про то, что таблицами не получится. Получится, если подумать. Про недостатки я и сам знаю.

Если уж вкладывать — тогда нафиг таблицы.

Answer 5

[Makito]

если акцент на блоках делается по цвету, то самый простой вариант — сделать на таблице в 3 колонки, разрыв крайних блоков можно сделать через задание цвета подложки промежуточным блокам

Answer 6

[shvedovka]

Ну вот просто 3 колонки jsfiddle.net/bA3fA/
А вот в точности как на рисунке jsfiddle.net/bA3fA/1/ (можно по высоте контентом растягивать любую ячейку, но с использование js)

Answer 7

[Алексей Фирсов]

Ребят зачем таблицей все таки 2012 на дворе а не конец 90-х) вообще я уже как год пользуюсь csstemplater.com/ экономит времени и вообще удобная штука)

А если нужно такой шаблон, то я бы в левую и правую колонку добавил по два дива) ну а тянуть по высоте на js) На csstemplater.com/ есть эмуляция высоты правой и левой колонки) на ccs кросс браузерная, проверял работает даже в ie6.

Answer 8

[azizoid]

что вы делаете? ничего не надо… jquery.masonry.js и все!