Верстая очередной раз довольно простую страницу DIV-ами неожиданно столкнулся с проблемой, на решение которой потратил довольно много времени.

Заданием было сверстать 2 колонки, причём, правая (#sidebar) имела фиксированную ширину (270px), а левая (#content) занимала всё остальное пространство, т.е. 100% – 270px.

Казалось бы всё просто. HTML:

<div id="main">
<div id="sidebar"></div>
<div id="content"></div>
</div>

CSS-код:

#main {
overflow:hidden;
}
#sidebar {
width:270px;
float:right;
}
#content{
margin-right:270px;
}

Но было ещё одно условие: в HTML-коде правый фиксированный DIV должен находиться после левого. То есть DIV с контентом должен находится раньше сайдбара в коде – для лучшей поисковой индексации непосредственно самого контента:

<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>

Решить проблему старым путём не удаётся. Интернет предлагает только предыдущий вариант верстки дивами в две колонки. Пришлось напрячься:

<div id="main">
<div id="content">
<div id="cont"></div>
</div>
<div id="sidebar"></div>
</div>

Как видно, появился новый элемент – div#cont. Теперь посмотрим на CSS и поймём, зачем он нужен:

#content {
float:left;
margin-left:-270px;
width:100%;
}
#sidebar {
float:right;
width:270px;
}
#cont {
margin-left:270px;
}

Что мы делаем? DIV#content отодвигаем влево ровно на 270px, чтобы влез сайдбар справа от него и вставляем в него же DIV#cont, внутри которого делаем отступ слева, чтобы наполнение сайта было в видимой части экрана. Вот, примерно, что получается:

В итоге имеем: валидную резиновую верстку DIV-ами в две колонки одинаковой высоты. Одна из которой имеет динамическую ширину, а другая фиксированная, причём, контент в коде находится перед сайдбаром.

2 колонки, 2 столбца, Вёрстка, Два столбца, Две колонки