CSS практик

Раскладка. Трехколонная

Posted by: fxix on: Октябрь 23, 2008

1. Создаем див-обертку, при желании задаем ему макс.\мин. ширину, или просто ширину. Можно дать оверфлой:хидден. Далее в него вложен блок с флоатом влево, шириной 100%, псевдоколонками (маргинботтом: -32767пк, паддингботтом: 32767пк) и отрицательным правым маргином:макс. ширине. Далее в него вложен блок с паддингами по горизонтали 200пк. И потом уже не вложенные две колонки  – правая зафлоачена направо, ширина 200пк, левая – налево, ширина 200пк:

<div id=»main»>

<div class=»wrap»>
<div class=»content»>MIDDLE Content</div>
</div>

<div class=»right»>MIDDLE Right</div>
<div class=»left»>MIDDLE Left</div>
</div>

#main {
overflow:hidden;
min-width:920px;
max-width:960px;
margin: 0 auto;
}

.wrap {
width:100%;
float:left;
margin-right:-960px;(зачем это непонятно!)
}

.content {
padding:0 200px;
}

.wrap, .left, .right {
margin-bottom:-32767px;
padding-bottom:32767px;
}

*html #main { /*для IE*/
width:960px;
}

.left {
width:200px;
float:left;
}

.right {
width:200px;
float:right;
}

http://trifler.ru/blog/i/layouts/ideal/source.htm