Двухколонная верстка (фиксированный sidebar и резиновый контент)

Какие требования к макету:

• Резиновый двухколонный макет
• sidebar фиксированной ширины 300px
• content растягивается на всю остальную ширину.
• footer прижатый к низу( в этом уроке не буду показывать как это делается).

Какие возникают Css проблемы при верстке такого макета:

1 способ.

Если вы делаете блоки флотнутыми (float), вы обязаны задать им фиксированную ширину (нельзя задать 1 sidebarу 300px и контенту 100%).В этом случае либо контент слезит вниз, либо появится горизонтальная прокрутка в 300px влево. Ну главное понять что этот способ нам не подходит.

2 способ.

Многие верстальщики предлагают этот способ, о чем они думают вообще?! Суть метода в том, что можно sidebar задать float шириной 300, а конент не флотать и задать ему margin-left:300px. Хороший способ и вроде бы все так хорошо получается. чесно говоря я думал что это самый отличный способ, но в этом методе есть свои подводные камни. Причины отказа от этого метода те что если вдруг мы в контенте верстаем к примеру меню с флотнутыми li либо любые другие блоки float и потом мы хотим их очистить с помощью clear:both, то нижняя граница этого блока сползает вниз на уровень нижней границы sidebar (Что и не странно так как очищается foat, можно этого избежать если флотнутому блоку задать фиксированную высоту, но это совсем не дело задавать фиксированную высоту).

3 способ.

Можно использовать для sidebar position absolute, но только в том случае если вы точно уверены что content по высоте будет больше sidebar иначе все содержимое sidebar залезит на footer(ведь аблосютное позиционирование вырывает с общего потока).

но как для меня это тоже не очень хороший способ!

4 способ.

"Отличный способ, если в нем есть какие-то недостатки прокомментируйте.Но я думаю это лучший способ."

• Плюсы этого метода: во первых в DOMe content будет идти раньше sidebara что хорошо для поисковиков.
• ничего не налазит на футер
• любые блоки можно очищать и ничего не будет слазить к нижней границе (Так мы побороли проблемы второго способа).

Вообщем как он работает: смотрим в код первым идет content за ним sidebar. задаем float этим двум блокам(естественно sidebar сползает вниз). после этого задаем sidebar свойство margin-left:-100%. отлично он вернулся на место, и делаем отступ у контента margin-lerft:300px.

<div id="conteiner">
    <div class="content">
    </div>
    <div class="sidebar">
    </div>
</div>

.sidebar{
    width:300px;
    display: block;
    float: left;
    margin: 0 0 0 -100%;    
}
.content{
    min-width:723px;    
    display: block;
    float: left;
    margin: 0 0 0 220px;
}