Блочная вёрстка: есть ли железный эквивалент таблице с тремя столбцами?
 

Блочная вёрстка: есть ли железный эквивалент таблице с тремя столбцами?

То есть нужно сделать div-ами две боковые панели по бокам и центральную в середине. И у каждой есть цвет фона. Так вот, закавыка в том, чтоцвет фона заливает всё до конца содержимого! А как сделать, чтобы все три дива были одинаковой высоты - по самому высокому - без указания height? :-)

Сейчас так:

в html:

<div id="content">

<div id="colmn1">
...
</div>

<div id="colmn2">
...
</div>

<div id="center1">
...
</div>

<div class="clearing">&nbsp;</div>

</div>

в css:
#colmn1 **
float: left;
width: auto;
height: 100%;
**
#colmn2 **
float: right;
width: auto;
height: 100%;
**
#center1 **
margin-left: 230px;
margin-right: 150px;
height: 100%;
**
.clearing **
clear: both;
height: 0;
**

Имелось в виду:

"Так вот, закавыка в том, что цвет фона заливает всё до конца содержимого этой панели, а не до начала подвала."

Вот здесь интересный пример, но если залить фоновым цветом центральную колонку, он всё равно заполнит панель только до окончания текста, а не до самого футера
[url]http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm[/url]

[url]http://sitear.ru/material/rastyanut-div-kolonki-po-vysote[/url]

Спасибо!
А вот ещё одно решение:
[url]http://www.positioniseverything.net/articles/onetruelayout/equalheight[/url]

display:table; -> display:table-cell;
<style>
DIV#id00
**
border: 1px solid red;
height:400px;
width:800px;
display:table;
**
DIV#id11
**
border: 1px solid green;
width:200px;
display:table-cell;
**
DIV#id22
**
border: 1px solid black;
width:400px;
display:table-cell;
**
DIV#id33
**
border: 1px solid black;
width:200px;
display:table-cell;
**
</style>
<div id="id00">
<div id="id11">
id11
</div>
<div id="id22">
id22
</div>
<div id="id33">
id33
</div>
</div>
Только про IE6 не спрашивайте))))

[url]http://trifler.ru/blog/post_1368866625.html[/url]