колонки одинаковой высоты
Здравствуйте!
У меня страничка состоит из двух колонок с одинаковой высотой. Хочу
сделать ее на слоях, но у меня левый слой (менюшка) короче правого
(текст страницы). Подскажите, пожалуйста, как сделать, чтобы колонки
всегда были одинаковой высоты? Очень не хочется верстать все одной
таблицей.
С уважением, Magnolia
библиотекa сайтостроительства http://www.i2r.ru/static/244/
-*Информационный канал Subscribe.Ru
Написать в лист: mailto:inet.webbuild.webbuilding-list@subscribe.ru
Отписать : mailto:inet.webbuild.webbuilding--unsub@subscribe.ru
http://subscribe.ru/ mailto:ask@subscribe.ru
Здравствуйте.
Проверено ИЕ6, Мозила1, Опера7.
1. Создай основной блок (#level), залей его любым цветом, лучше тем
которым у тебя блок с меню покрашен. Внутрение отступы (padding) - по
нолям.
2. Потом блок с меню создаешь (div#menu),
он у нас слева, поэтому ему - float:left;
3. Сам контент (div#content):
делаем блок без указания ширины, тогда он заимет все
нужное пространство. Заливаем белым цветом. Отступ с лева - на ширину
меню (200px должно хватить.), осталтные - по нолям.
В Опре внизу страницы появляется промежуток, лечится это вставкой
пустого блока.
Сам код собственно:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
div#level {
width:100%;
padding:0px 0px 0px 0px;
background-color:#99CCFF;
border:1px solid #000000;
}
div#menu {
width:200px;
float:left;
}
div#content {
margin:0px 0px 0px 200px;
background-color:#ffffff;
border:1px solid #ff0000;
}
</style>
</head>
<body>
<div id="level">
<div id="menu">
<ul>
<li>первый</li>
<li>второй</li>
<li>третий</li>
<li>четвертый</li>
</ul>
</div>
<div id="content">
<p> текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст</p>
<p> текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст</p>
<p> текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст</p>
<p> текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст</p>
<p> текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст
текст текст текст текст текст текст текст текст текст текст
текст</p>
<div id="#"></div>
</div>
</div>
</body>
</html>