Сложный случай адаптивного макета

[troll31]

Попался непростой дизайн для верстки, сайт будет адаптивный, хотя дизайн изначально под это не был рассчитан.

Никак не могу решить, как правильно сверстать нижнюю часть. В правой и левой колонке фоном идет рисунок (рипитится по вертикали) и часть этого рисунка по замыслу дизайнера должна выступать за границу сайта. В принципе, это можно сделать и отрицательным маржином, но придется убирать выравнивание высоты колонок, потому, что необходимый для выравнивания overflow:hidden, не дает блоку с картинкой вылезти за границу сайта. С помощью before и after тоже не получается (абсолютное позиционирование не дает репититься рисунку). Проблема на декстопной версии сайта решилась увеличением общей площади контейнера и центрированием верхних элементов, тогда у нижних колонок с выступающим рисунком остается больше места. Но обнаружилась другая проблема. С уменьшением разрешения экрана ширина желтого блока и нижней части уменьшается неравномерно. Нижняя часть становиться значительно меньше по ширине, чем желтый блок. Потому, что на больших экранах она была больше. Может быть, немного путанно объясняю, но как мне сделать выступ рисунка за границы колонок и при этом сохранить равномерное уменьшение ширины верхних блоков сайта на малых экранах?

Привожу код. который у меня получился.

<div class="wrapper"
<div class="content clearfix">
<div class="left-col">hhjkhk</div>
<div class="right-col">k;kl;k;k;</div>
<div class="center-col"></div>
</div>
</div>
<style>
.wrapper {
width:100%;
max-width: 1320px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.content {
width:100%;
min-width: 400px;
margin:0 auto;
overflow: hidden;
min-height:1000px;
}
.left-col {
float: left;
width: 240px;;
background-image: url(../images/bg.png);
background-position: top right;
background-repeat: repeat-y;
padding-bottom: 20000px;
margin-bottom: -20000px;
}
.right-col {
float: right;
width: 240px;
background-image: url(../images/bg.png);
background-position: top left;
background-repeat: repeat-y;
padding-bottom: 20000px;
margin-bottom: -20000px;
}
.center-col {
overflow: hidden;
padding-bottom: 20000px;
margin-bottom: -20000px;
}

</style>

Не найду, где можно загрузить скриншот.

Заранее благодарю за любую подсказку!!!

Edited August 13, 2013 by troll31

[SelenIT]

необходимый для выравнивания overflow:hidden

Есть разные способы выравнивания высоты колонок. Многие, если не большинство, из них ("faux columns" с картинкой или градиентом, display: table-cell, способ Чикуёнка, флексбоксы) не требуют overflow.

[npofopr]

Не найду, где можно загрузить скриншот.

радикал или http://itmages.ru/ или яндекс.диск или дропбокс или гугл-докс.

[troll31]

SelenlT, npofopr, большое спасибо за наводку! Способ с градиентом и картинкой наиболее оптимальный.. но.. для фиксированных макетов, фоновую картинку в таком виде будет трудно адаптировать под малые экраны с сохранением пропорций. table-cell тоже хороший способ (под IE6-7 уже не верстают), флексбоксы не дружат с IE ниже 10 версии. Способ Чикуенка настораживает отрицательными маржинами, все таки HTML5..) Придется, наверное, увеличивать ширину общего блока на ширину выступа, а потом на малых экранах этот выступ обрезать (подредактировать картинку).

Вот скрин, что хотелось бы получить в результате http://s019.radikal.ru/i601/1308/b2/87c390f5f30e.jpg

Интересно, сколько же сообщений нужно написать, чтобы получить уже право ставить плюс)