Yanyana sıralı "div"leri özelleştirme

Merhabalar...

Ekteki resimde olduğu gibi yanyana sıralı üç div oluşturduğumuzu varsayalım. Ortadaki alanın yukarıdan aşağıya uzunluğu (yüksekliği) ne olursa olsun yandaki divlerle aynı uzunlukta gözükmesini nasıl sağlayabiliriz? Yani sol ya da sağdaki divler ne kadar uzarsa uzasın ortadaki div de aşağıya doğru onlarla beraber uzasın, ortada bağımsız bir alan gibi durmasın.

Yardımlarınız için şimdiden teşekkürler...

Bilenler için o kadar da zor olmasa gerek bunu yapmak. Bilen arkadaşların yardımını bekliyorum hala...

sorunun cevabını kendin vermişsin aslında. Eğer html çözüm ile yapmak istiyorsan. Birbiriyle iç içe olacak şekilde bir çözüm yapmalısın. yani o orta divin içine diğer ikisini koyarsın mesela böylelikle orta da otomatik uzar. ama eğer javascript ile yapmak istersen de o 3 dive "column" class'ı ver sonra javascript ile de şu fonksiyonu çalıştır:

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
   
}
$(document).ready(function() {
   equalHeight($(".column"));
});

@teknolyo:
İçiçe div yaptığım zaman yanlar uzayınca orta da uzuyor onu denedim. Ama bu sefer de orta uzadığı zaman yanlar sabit kalıyor. Uzamıyor yani. Ben üçü de birbiriyle uyumlu hareket etsin istiyorum. Herhangi biri uzadığında diğerleri de ona uysun yani.

Diğer önerin içinse bir şey diyemiyorum. Çünkü javascriptten hiç anlamıyorum. Biraz açıklarsan çok yardımcı olmuş olursun.

Teşekkürler...

<div class="item">
                <div class="dbanner"><a target="_self" href="/yatirim/default.aspx"><img alt="" src="/banner/media/27/YKA1/gorsel.aspx"></a>
                    <h2 class="landing">Default Banner</h2>
                    <span class="text">Mevduat Fon Paketi</span></div>
                    <div class="clear"></div>
</div>    
<div class="item2">
                <div class="dbanner"><a target="_self"  href="/yatirim/default.aspx"><img alt=""  src="/banner/media/27/YKA1/gorsel.aspx"></a>
                    <h2 class="landing">Default Banner</h2>
                    <span class="text">Mevduat Fon Paketi</span></div>
                    <div class="clear"></div>
</div>    
<div class="item3">
                <div class="dbanner"><a target="_self"  href="/yatirim/default.aspx"><img alt=""  src="/banner/media/27/YKA1/gorsel.aspx"></a>
                    <h2 class="landing">Default Banner</h2>
                    <span class="text">Mevduat Fon Paketi</span></div>
                    <div class="clear"></div>
</div>

js

$(document).ready(function() {
    var bannerTextHeight = 0;
    $(".dbanner").each(function() {
        if (bannerTextHeight < $(this).height()) {
            bannerTextHeight = $(this).height();
        }
    });

    $(".dbanner").each(function() {
        $(this).css('margin-bottom', (bannerTextHeight - $(this).height()) + 20);
    });

});

Alttan 20 px boşluk bırakarak hepsini eşit seviyede tutar. Diğer style'ları senin vermen gerek bu haliyle koyarsan yanyana durmaz. Örnek;http://finansbank.com.tr/yatirim/default.aspx

basit bir çözümü var. ortadaki div'e height: 100% de sag yada soldaki divlerin birisinin altından verdiğinin boslugun aynısını ortadaki div'e verin tamamdır..

bosuna js mj ugrasmana grek yok

@kereky, söylediğini anlamadığım için sanırım yapamadım. Aşağıdaki kodlar üzerinde anlatır mısın?

<style type="text/CSS">
#ana{width:960px;height:100%;background-color:#CCCCCC}
#sol{width:20%;height:100%;float:left;background-color:#00CC00}
#orta{width:60%;height:100%;float:left;background-color:#0000CC}
#sag{width:20%;height:100%;float:left;background-color:#FFCCCC}
</style>
<div id="ana">
<div id="sol">SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br>SOL<br></div>
<div id="orta">ORTA<br>ORTA<br>ORTA<br>ORTA<br>ORTA<br>ORTA</div>
<div id="sag">SAG<br>SAG<br>SAG<br>SAG<br>SAG</div>
</div>

Böyle yaptığımda divlerin içeriği boş olunca alanların yüksekliği ekranın yüksekliği kadar(100%) gözüküyor. Ancak divlerden biri ekranın yüksekliğinden daha fazla uzadığında diğerleri ekranın yüksekliği kadar sabit kalıyor. İstersen http://www.bunlarlazim.com/deneme.html adresinden bakabilirsin. Bu şekilde Explorer 8'de istediğim gibi fakat Opera, Firefox ve Chrome'da bozuk gözüküyor. Bu sorunu halledebilir miyim?