[atillus]

Добрый день!
Провел множество часов в поиске доков и примеров по CSS, но не нашел корректно работающего во всех браузерах (я беру ИЕ, Файрфокс и Оперу) решения данной проблемы.
Нашел только решение с применением JavaScript, то ведь должно быть чисто CSS - решение... не верится что нет !

Итак:
Содержимое файла index.html

<?xml version="1.0" encoding="windows-1251"?>
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main">
<div class="top"><strong>ШАПКА САЙТА </strong></div>
<div class="left">
<p><strong>МЕНЮ САЙТА</strong></p>
<p>раздел сайта</p>
<p>раздел сайта</p>
<p>раздел сайта</p>
<p>раздел сайта</p>
<p>раздел сайта </p>
</div>
<div class="right">
<h1>Заголовок 1. </h1>
<p>Абзац 1. Текст статьи под заголовком 1. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. <br />
Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. </p>
<p>Абзац 2. Текст статьи под заголовком 1. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. </p>
<h1>Заголовок 2. </h1>
<p>Абзац 1. Текст статьи под заголовком 2. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. <br />
Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи. Далее идет текст статьи.</p>
</div>

<div class="bottom"><strong>&quot;Подвал&quot; сайта </strong></div>

</div>
</body>
</html>

Содержимое файла style.css

html, body
{
height: 100%;
}

.main
{
width: 920px;
margin: 0 auto;
padding: 10px;
background-color: #D4D0C8;
overflow: hidden;
}

.top {
margin: 0px;
padding: 0px;
width: 100%;
background-color: #99FF66;
height: 80px;
}
.left {
background-color: #999999;
float: left;
width: 20%;
margin: 0px;
padding: 0px;
height: inherit;
overflow: hidden;
}
.right {
margin: 0px;
padding: 0px;
float: right;
width: 80%;
background-color: #FFFF99;
}
.bottom {
width: 100%;
height: 25px;
padding: 0px;
background-color: #999900;
margin: 0px;
float: left;

}

КАК сделать высоту слоев left и right, чтобы по высоте они занимали все пространство от top до bottom НЕЗАВИСИМО от количества содержимого в них!
То есть, если в "left" содержимого больше, чем в "right" - то "right" растянется по высоте до уровня "bottom",
а если в "right" содержимого больше, чем в "left" - то "left" растянется по высоте до уровня "bottom".


Прошу помощи!