CSS - резиновая высота DIV - уже голова трещит :(

[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".


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

[Mnilionic]

http://www.webmascon.com/topics/coding/43a.asp

[KidsKilla]

То есть, если в "left" содержимого больше, чем в "right" - то "right" растянется по высоте до уровня "bottom",
а если в "right" содержимого больше, чем в "left" - то "left" растянется по высоте до уровня "bottom".

в чистом виде это невозможно.

как простейшая альтернатива -- пример выше. есть ещё страшные-ужастые варианты со множеством ограничений, но в них разбираться -- себе же дороже.

в сложных случаях жаваскрипт -- оптимально.

ПС, вместо того чтобы тратить время попусту просто потому что "не верится" лучше читайте спецификации и документацию разработчиков.