Данный небольшой урок по CSS посвящён тем, кто хочет освоить блочную вёрстку. Сегодня мы разберём такой вопрос, как создание 2-х колонок одинаковой высоты при помощи блоков, а не таблиц. Это умение применяется практически везде, даже верстая стандартный макет из 2-х колонок, вы столкнётесь с этой проблемой, если вы будете верстать блоками. Так же этот урок направлен на развитие понимания самих принципов блочной вёрстки. Посмотрите на изображение ниже. При помощи таблиц такой результат достигается автоматически. Но с блоками всё иначе. Посмотрите на 2 колонки свёрстанных блоками. Почему же так происходит? Ответ прост. Дело в том, что таблица это целостный элемент, в котором каждая ячейка зависит от другой, потому она и продолжается дальше. Блок же это отдельный, самостоятельный элемент и он никогда не будет вести себя как таблица! Так что добиваться такого же результата при помощи блоков, какого добились и от таблиц мы будем, используя маленькие хитрости. Их много, но сегодня я приведу самую простую и понятную новичку хитрость. Мы просто поместим оба блока в ещё один блок, который их объединит, и этому блоку зададим такой фон, который нам нужен. Так как общий блок будет продолжаться до конца самого большого из блоков, его фон будет распространяться вниз. Посмотрим, как это выглядит на схеме.
Теперь давайте переходить непосредственно к коду. HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="rus">
<head>
<title>Создание колонок одинаковой высоты</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<div id='main'>
<div id='one'>
<p>Ut wisi enim ad minim veniam,quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>
<div id='two'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</div>
</html>
Теперь разберём что к чему. Далее создадим фоновое изображение. Ширина главного блока у нас будет равна 700px. Следовательно и ширина фонового изображения будет равна 700px. Высоту можно задавать любую в зависимости от того, какой у вас фон. Я создал такое изображение и назвал его textured.gif Теперь смотрим, что получилось в CSS #main {width:700px; margin:0 auto; background-image:url(textured.gif); background-repeat:repeat-y; } #one {width:400px; float:left;} #two {width:300px;} Теперь если мы посмотрим на результат, то увидим следующие: В заключение данного урока, для лучшего понимания я приведу пример с изменённым фоновым изображением. Я создал вот такое фоновое изображение и назвал его textured1.gif Естественно соответствующим образом изменил одно из свойств в CSS. #main {width:700px; margin:0 auto; background-image:url(textured1.gif); background-repeat:repeat-y; } Вот что получилось: Автор урока: Игорь Ермаков. Опубликовал: Максим Шкурупий. P.S. от Максима: данный эффект не работает у меня в Firefox.
Главная->Уроки по css->Создание 2-х колонок одинаковой высоты на CSS
