Stfw.RuКак создать колонки одинаковой высоты?
🕛 19.01.2009, 20:53
Суть метода в следующем - добавляем слева или справа от элемента границу, ширина которой совпадает с шириной одной из колонок. Понятно, что границы предназначены совсем для других целей, но в данном случае такое их использование позволяет получить желаемый результат. Для этого создаем слой с именем container и для него устанавливаем стиль, как показано в примере 1.Пример 1. Создание колонок
#container { border-left: 200px solid maroon /* Параметры левой колонки */ background: #f0f0f0; /* Цвет фона правой колонки */
}Поскольку элемент у нас всего один, то колонки, имитированные с помощью широкой вертикальной линии и фона, имеют одинаковую высоту. Остается расположить информацию точно поверх этого контейнера. Для левой колонки, назовем ее col1, следует задать ее ширину и с помощью стилевого атрибута float указать, что это плавающий элемент. Поскольку граница не является частью текстового блока, то требуется сместить слой col1 влево за счет добавления атрибута margin-left с отрицательным значением, равным ширине границы (пример 2).Пример 2. Формирование левой колонки
#col1 { width: 200px; /* Ширина левой колонки */ float: left; /* Превращаем в плавающий элемент */ margin-left: -200px; /* Сдвигаем все влево на ширину границы */ color: #fff; /* Цвет текста в колонке */
}В данном примере сочетание атрибутов float и margin-left с отрицательным значением позволяет расположить содержимое слоя прямо поверх границы. Для правой колонки col2 никаких дополнительных условий указывать не надо, текст будет располагаться как нам требуется.Из-за того, что плавающий элемент располагается поверх линии границы, может получиться, что текст в левой колонке выходит за пределы цветного прямоугольника. Чтобы этого не произошло, следует отменить действие float за счет использования атрибута clear. Окончательный код показан в примере 3.
Пример 3. Колонки одной высоты
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Две колонки одной высоты</title> <style type="text/css"> #container { border-left: 200px solid maroon; /* Цвет и ширина левой колонки */ background: #f0f0f0; /* Цвет фона правой колонки */ } #col1 { width: 200px; /* Ширина левой колонки */ float: left; /* Превращаем в плавающий элемент */ margin-left: -200px; /* Сдвигаем все влево на ширину границы */ color: #fff; /* Цвет текста в колонке */ } #col1 p { padding: 5px; /* Поля вокруг абзаца текста */ margin: 0; /* Обнуляем отступы */ } #col2 { padding: 5px; } div.clear { clear: both; /* Убираем все плавающие элементы */ } </style> </head> <body> <div id="container"> <div id="col1"> <p>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="col2"> 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. </div> <div class="clear"> </div> </div> </body>
</html>
Данный пример работает в браузерах Firefox и Opera и некорректно отображается браузером Internet Explorer 6 (IE6). Это связано с ошибкой интерпретации границ этим браузером. Для создания универсального кода придется «подкладывать» для IE6 индивидуальный стиль, в частности, текущее значение margin-left для слоя col1 надо разделить пополам. В примере 4 показано, как сделать стиль, который будет пониматься только в IE6.
Пример 4. Отступ для Internet Explorer
* HTML #col1 { margin-left: -100px; /* Сдвигаем все влево на половину ширины границы */
}Конструкция * HTML работает только в Internet Explorer, остальные браузеры ее пропустят. Универсальный код с учетом особенностей браузеров показан в примере 5.Пример 5. Использование границ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Две колонки одной высоты</title> <style type="text/css"> #container { border-left: 200px solid maroon; background: #f0f0f0; } #col1 { width: 200px; float: left; margin-left: -200px; color: #fff; } * HTML #col1 { margin-left: -100px; } #col2 { padding: 5px; } div.clear { clear: both; } </style> </head> <body> <div id="container"> <div id="col1">Колонка 1</div> <div id="col2">Колонка 2</div> <div class="clear"> </div> </div> </body>
</html>В данном примере показано создание левой колонки фиксированной ширины, а правая колонка занимает все доступное пространство. Для случая, когда колонки надо поменять местами, используйте border-right вместо border-left; float: right вместо float: left и margin-right вместо margin-left. Остальные правила останутся неизменными.