SEO-Friendly 3 колонки

Question

Мне нужно расположить сайт с тремя столбцами в следующем порядке:

leftColumn | mainColumn | rightColumn

leftColumn и rightColumn - оба столбца рекламы, а раздел mainColumn содержит весь SEO-богатый контент.

Поэтому в коде я разместил элементы div, используемые для макета, в следующем порядке, чтобы основной контент сначала просматривался для выгоды SEO:

<div id="mainColumn">
</div>
<div id="leftColumn">
</div>
<div id="rightColumn">
</div>

Я также сделал это таким образом, чтобы, еслипользователь просматривает страницу с мобильного, сначала он увидит основной контент, а не рекламу.

Итак, мой вопрос: как стилизовать столбцы, чтобы они отображались в правильном порядке?Это страница HTML5 / CSS3.

Answer 1

Вы можете сделать что-то вроде этого в качестве отправной точки:

<div id="mainColumn" class="column">1</div>
<div id="leftColumn" class="column">2</div>
<div id="rightColumn" class="column">3</div>

.column {
    position:relative;  
    float:left;
    width:25%;
}
#mainColumn {
    width:50%;
    left:25%;   
}
#leftColumn {
    left:-50%;  
}

Демо: http://jsfiddle.net/bn3t8/

Этот код является очень простым и, вероятно, требует исправлений IE и поддержки полноразмерных фонов на столбцах. Возможно, вы захотите проверить этот сайт для некоторых более оборонительных стратегий (настоятельно рекомендуется):

http://matthewjamestaylor.com/blog/perfect-3-column.htm