Главная
Web-дизайн
Резиновая вёрстка div 2 столбца (две колонки)

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

Доброго времени суток!
Многие начинающие верстальщики сталкиваются с вопросом -как сверстать резиновый контент для сайта. Чаще всего - это просто сайдбар справа (#sidebar) с фиксированной шириной (250px) и слева часть с контентом (#content) занимающая остальную ширину на экране, т.е. 100% — 250px.
Сначала может показаться, что все очень просто, но как показывает практика - не совсем 🙂 Вот простой HTML код, который осуществит наш план:

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

и стили CSS к нему:

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

Но есть одно "НО!" при верстке - правый сайдбар должен находиться раньше сайдбара в коде — для лучшей поисковой индексации непосредственно самого контента.

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

После такого изменения - старый способ уже не подойдет. Поэтому вносим немного изменений в наш код.

<div id="main">
<div id="primary">
<div id="content">
Тут содержимое контента
</div>
</div>
<div id="secondary">Содержимое сайдбара</div>
</div>

По коду видно что, внутрь основного primary был добавлен новый элемент — #content. Теперь нужно добавить новые стили CSS, чтобы все сработало.

#main{
        max-width:1000px;
}
#primary{
        float: left;
	margin: 0 -27.4% 0 0;
	width: 100%;}
#secondary{
	float: right;
	margin-right: 2.6%;
	width: 24.8%;
}
#content{
	margin: 0 36% 0 5.6%;
	width: 58.4%;
}

Все это приводит к тому, что #primary передвигаем влево ровно на -27.4% и вставляем в него же #content, внутри которого, будет находится весь контент.
На этом все. Спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(8 голосов, в среднем: 4.5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий