X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-05-26
  • 7326 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток!

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

no image

Сначала может показаться, что все очень просто, но как показывает практика - не совсем 🙂 Вот простой 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
Проголосовало: 20, в среднем: 4.4 из 5
Читайте также
Комментариев нет. Оставьте первый

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.