Структура верстки для двоколонковому сайту

Відео: Уроки по CSS / CSS3. Частина 22. Верстка сайту

Колись я писав про структуру для трёхколоночного сайту. А в цій статті я покажу, як виглядає структура верстки для двоколонковому сайту.

Для початку HTML-код:

Відео: 300 сайдбарі ► Як зверстати структуру сайту?

id="Header"gt;Шапка сайту 
id="Content"gt; 
id="Left"gt;ліва колонка 
id="Right"gt;права колонка 
 
class="Clear"gt; 
id="Footer"gt;підвал

І CSS-код:

Відео: Основи CSS - # 4 - Структура сайту

.clear { 
 clear: both- 
} 
#content { 
 width:100% - 
} 
#left { 
float: left- 
 margin-right:30px- 
 width:200px- 
} 
#right { 
 width:100% - 
}

Ключовий момент тут полягає в тому, що у нас #content має ширину 100%, тобто він розтягується на всю ширину батьківського контейнера (наприклад, body). Далі ми вказуємо фіксований розмір для #left (Хоча можна вказати і відсотки, якщо це необхідно), а для #right ми вказуємо 100% від залишку вільного місця.