Javascript. Css вопрос - "резиновая высота DIV"

[Black#FFFFFF]

Итак имеем следующую структруру:

<div id="left" style="float: left; width: 49%;">
......хтмл динамически отгружаемый сервером...
</div>
<div id="middle" style="float: right; width: 49%;">
<div id="div_anonce">
......хтмл динамически отгружаемый сервером..
</div>
<div id="div_events">
......хтмл динамически отгружаемый сервером..
</div>
</div>

Требуется, чтобы Второй див id="middle" по высоте был всегда таким как первый id="left". А его дочерние дивы id="div_anonce",id="div_events" имели бы по половине высоты родительского.
И если информации больше в дивах, то тогда появлялись полосы прокрутки внутри двух дочерних дивов (в id="left" полосы прокрутки ненужны, высота динамическая в зависимости от информации подгружаемой с сервера).
На ум пришло поэксперементировать с яваскриптом и css свойством overflow: auto;

Нечто похожее на готовое решение далее:

<div id="left" style="float: left; width: 49%;">
......хтмл динамически отгружаемый сервером...
</div>
<div id="middle" style="float: right; width: 49%; display: none">
<div id="div_anonce">
......хтмл динамически отгружаемый сервером..
</div>
<div id="div_events">
......хтмл динамически отгружаемый сервером..
</div>
</div>

далее вставка после хтмл кода:

 ti = false; //таймер
            X=0; //высота всего окна с прокручеваемой областью
            dheight=0; //высота дочерних дивов второго дива
function div_height()
            {




              if(X==0&&dheight==0)
              {
                var offset=...; 
                var doffset=...; //расчет внутренних оффсетов "на глаз" просто до дивов есть еще код и после них тоже


                var br=window.navigator.userAgent.toLowerCase();
                var clientHeight;
                var scrollHeight;


                if(br.indexOf("msie")!=-1||br.indexOf("mozilla")==-1) //расчитываем для раличных браузеров высоту окна и прокручевоемой области, если таковая есть
                {
                clientHeight = document.body.clientHeight;
                scrollHeight = document.body.scrollHeight;
                X = Math.max(clientHeight,  scrollHeight)-offset;
                    ti=setInterval(div_height,500); 
//фиксим прикол overflow в IE 7.0 (свойство применяется но! и увы! баг)

                } else
                {
                clientHeight = window.innerHeight+window.scrollMaxY;
                scrollHeight = document.height + window.scrollMaxY;
                X = Math.max(clientHeight,  scrollHeight)-offset;
                }
                if(X<600)
                    X=600;


                dheight = Math.floor((X-doffset)/2);

               } else {
                    if(ti != false)
                        {
                        X -= 2;
                        dheight -=1;
                        clearInterval(ti);
                        }
               }
                var mdiv = document.getElementById("middle");
                mdiv.style.height = X+"px";


                var adiv = document.getElementById("div_anonce");
                adiv.style.height = dheight+"px";

                var ediv = document.getElementById("div_events");
                ediv.style.height = dheight+"px";

                mdiv.style.display = "";


            }

Ну вот вопрос:

свойствами только исключительно CSS эта задача решаема?
Сделать чтобы один див динамически свою высоту подгонял под другой?

И вопрос второй:
Мне приходится вызывать еще раз эту функцию для эксплорера 7.0 ибо эта гадость после установки оверфлоу с помощью яваскрипта и задания высоты ДИВА Отказывается рисовать скроллеры - (прокрутка работает, а вот скроллеры визуально отсутствуют до повторного изменения размера областей или щелчка в этой области (причем если принудительно сгенерировать событие click для этих дивов, проблемма не решается, приходится по setInterval вызывать функцию опять и "отнимать" немного высоты)) - другим способом этот баг исправить можно?