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

Сначала может показаться, что все очень просто, но как показывает практика - не совсем 🙂 Вот простой 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, внутри которого, будет находится весь контент.
На этом все. Спасибо за внимание 🙂