X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-06
  • 11855 переглядів

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

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

Многие начинающие верстальщики сталкиваются с вопросом -как сверстать резиновый контент для сайта. Чаще всего - это просто сайдбар справа (#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
Проголосовало: 22, в среднем: 4.3 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078