nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

Резиновая вёрстка Div, две колонки (2 столбца)

Сверстать 2 колонки с помощью div довольно просто.
Правая колонка фиксированной ширины - 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;
}


В плане СЕО очень важно чтобы вначале шел контент, а уже после него все остальное.

Если просто взять и поменять местами теги контента и сайдбара то верстка разьедится.

Правильным решением будет добавить еще один слой сдвинув контент на 270 пикселей влево.



HTML


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


CSS


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


Вас зовут:

Ваш комментарий:


Код на картинке: