Задача: 3 колонки дивами одной высоты в процентных величинах.
Истоки схемы решения именно "одновысотного" варианта верстки колонок дивами можно посмотреть например ТУТ.
Там же рассказывается о возможных костылях схемы.
Я же хочу заострить внимание именно на процентном варианте ширины колонок. Проблема заключается в корректном подборе значений процентов.
В приведнном ниже коде скрипт позволяет рассчитать различные варианты этих самых процентов, при которых схема будет корректно работать.
Диапазон подбора значений (в %) для каждой колонки выставляется тут:
//границы выборки
c1min = 10; c1max = 30;
c2min = 40; c2max = 100;
c3min = 10; c3max = 30;
Вверху страницы сверстаный вариант по стилям:
<!-- контейнеры -->
#wrapCol1 {width:20%}
#wrapCol2 {width:250%; margin-left:100%}
#wrapCol3 {width:60%; margin-left:100%}
<!-- колонки -->
.col1 {width:67%; margin-left:-234%; float:left}
.col2 {width:167%; margin-left:-167%; float:left}
.col3 {width:100%; float:left}
Скрипт предлагает варианты значений с визуализацией колонок, которые нужно просто прописать в вышеуказанные стили, чтобы получить колонки одинаковой высоты.
Для "выдирания" схемы из моего кода, нужно забрать указанные выше стили и html-кусок:
<div id="wrapCol1">
<div id="wrapCol2">
<div id="wrapCol3">
<div class="col1">
left column<br>
left column<br>
left column<br>
</div>
<div class="col2">
center column<br>
center column<br>
center column<br>
center column<br>
</div>
<div class="col3">
right column<br>
right column<br>
</div>
<div class="clear"></div>
</div>
</div>
</div>
Некоторые замечания:
1. Безусловно, плавание плюс-минус один-два пикселя может иметь место, ввиду того, что при растеризации процентных величин, пикселы не всегда будут целочисленно влезать в размеры колонок.
2. Схема работает в Опере, Хроме, 8-м Ишаке, Мозилле, Сафари, релизами 2011 года. В древних и экзотических случаях - не проверял. Но думается какие-то костыли можно прикрутить при желании и необходимости.
Ну и сам код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
<!-- обнулятор -->
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp,small, strike,
strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption,
tbody, tfoot, thead, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body {line-height:1}ol,
ul {list-style:none}
blockquote, q {quotes:none}blockquote:before, blockquote:after, q:before, q:after {content:'';content:none}
:focus {outline:0}ins {text-decoration:none}del {text-decoration:line-through} img {border:0;outline:0}
<!-- общая структура -->
html,body {width:100%;font:14px Arial;color:#444}
body {background-color:#111;line-height:150%}
#globalcanva {position:relative;width:100%;min-width:1024px;max-width:1440px;margin:0 auto;background-color:#fff}
#wrap100 {width:100%;background-color:#ccc;text-align:center}
.clear {clear:both;overflow:hidden;width:100%;height:2px}
.exampleCol {margin:12px 0;padding:4px 0;text-align:center;float:left;color:#333}
<!-- контейнеры -->
#wrapCol1 {width:20%}
#wrapCol2 {width:250%; margin-left:100%}
#wrapCol3 {width:60%; margin-left:100%}
<!-- колонки -->
.col1 {width:67%; margin-left:-234%; float:left}
.col2 {width:167%; margin-left:-167%; float:left}
.col3 {width:100%; float:left}
<!-- раскрашиваем контейнеры и колонки -->
#wrapCol1 {background:#FFC9C9}
#wrapCol2 {background:#9ECF9E}
#wrapCol3 {background:#D3E7FF}
.col1 {outline:1px solid #f00;text-align:center}
.col2 {outline:1px solid #0f0;text-align:center}
.col3 {outline:1px solid #00f;text-align:center}
</style>
</head>
<body>
<div id="globalcanva">
<div id="wrap100">100%</div>
<div id="wrapCol1">
<div id="wrapCol2">
<div id="wrapCol3">
<div class="col1">
left column<br>
left column<br>
left column<br>
</div>
<div class="col2">
center column<br>
center column<br>
center column<br>
center column<br>
</div>
<div class="col3">
right column<br>
right column<br>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div style="text-align:center;color:#000;font-size:14px;"><br><b>Варианты колонок</b><br></div>
<div id="res" style="color:#fff;font-size:12px"></div>
</div>
<script type="text/javascript">
//границы выборки
c1min = 10; c1max = 30;
c2min = 40; c2max = 100;
c3min = 10; c3max = 30;
doc = document;
sets = '';
d1 = '<div class="exampleCol" style="width:';d2 = '%;background-color:';d3='">';d4 = '</div>';
clrDiv = '<div class="clear"> </div>';
for (var c1 = c1min; c1<=c1max; c1++) {
for (var c2 = c2min; c2<=c2max; c2++) {
for (var c3 = c3min; c3<=c3max; c3++) {
sum = c1*1 + c2*1 + c3*1;
if ((sum > 99) && (sum < 101)) {
w1 = c1;
k1 = c1*100;
k2 = c2*100;
k3 = c3*100;
o0 = k3 % c1;
o1 = k2 % c1;
o2 = k3 % c2;
if ((o1 == 0) && (o2 ==0) && (o0 ==0)) {
w2 = Math.round(k2/c1);
w3 = Math.round(k3/c2);
col1 = Math.round(c1/c3*100);
col2 = Math.round(c2/c3*100);
col3 = '100';
//sets = sets + '<br>col1 = '+c1+' col2='+c2+' col3='+c3;
sets = sets +
d1 + c1 + d2 + '#FFC9C9'+ d3 + c1 +'%<br>wrap1.width = <b>'+w1+'%</b><br>col1.width = <b>'+col1+'%</b><br>col1.marginLeft = <b>-'+(col1+col2)+'%</b>' + d4 +
d1 + c2 + d2 + '#9ECF9E'+ d3 + c2 +'%<br>wrap2.width = <b>'+w2+'%</b><br>col2.width = <b>'+col2+'%</b><br>col2.marginLeft = <b>-'+(col2)+'%</b>' + d4 +
d1 + c3 + d2 + '#D3E7FF'+ d3 + c3 +'%<br>wrap3.width = <b>'+w3+'%</b><br>col3.width = <b>'+col3+'%</b><br>col3.marginLeft = <b>0</b>' + d4 + clrDiv;
}
}
}
}
}
doc.getElementById('res').innerHTML=sets;
</script>
</body>
</html>
Надеюсь кому-нибудь пригодиться.