3 макета колонки с центральной колонкой 500px
Это сложный макет наверняка. Я нашел эту демонстрационную страницу, которая имитирует это:
http://www.gunlaug.no/tos/moa_27c.html
И смог воспроизвести с довольно небольшим количеством CSS и HTML (вам придется изменить свою разметку). Демо: http://jsfiddle.net/jAsMx/
<div id="side1">
<div class="col">
<p>First</p>
</div>
<div>
<p>Second</p>
</div>
</div>
<div id="side2">
<div class="col">
<p>Third</p>
</div>
</div>
#side1 {
width: 50%;
float: left;
margin: 0 -260px 0 0;
background: #fff;
padding: 0 0 10px;
}
#side1 div {
margin: 0 250px 0 0;
min-height: 300px;
background: #dda;
}
#side2 {
width: 50%;
float: right;
margin: 0 0 0 -260px;
background: #fff;
}
#side2 .col {
background: #dda;
margin: 0 0 0 250px;
}
#side1 .col {
background: #fea;
width: 500px;
float: right;
margin: 0 -250px 0 0 ;
position: relative;
}
.col {
/* For backgrounds: This is not an equal height layout yet... */
min-height: 300px;
}
Он использует отрицательные поля для компенсации фиксированной ширины центрального столбца и порядка расположения столбцов 2-1-3 (что обеспечивает незначительный прирост SEO, так как ваш основной контент выше в источнике страницы). Хотя это не готовый к производству макет, он должен помочь вам начать работу.