Доброго времени суток!
Многие начинающие верстальщики сталкиваются с вопросом -как сверстать резиновый контент для сайта. Чаще всего - это просто сайдбар справа (#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, внутри которого, будет находится весь контент.
На этом все. Спасибо за внимание 🙂