Двоколонна верстка (фіксований 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 що добре для пошукових систем.
• нічого не налазить на футер
• будь-які блоки можна очищати і нічого не буде злазити до нижньої межі (Так ми подолали проблеми другого способу).

Взагалі як він працює: дивимося в код першим йде вміст за ним 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;
 }