问一个简单的div布局的有关问题 _HTML/CSS

问一个简单的div布局的问题
我想在一个div中套3个div,像下面这个图这样，其中最右边那个div可以随左边两个div的大小变化而自动适应，应该怎么写呀？

我这样写那bottomR为什么被挤到一个小地方了呢？

<div id="bottom">
<div id="bottomL1">
</div>
<div id="bottomL2">
</div>
<div id="bottomR">
aaaa
</div>
</div>
CSS中#bottom
{
}

#bottomL1
{
width:705px;
height:205px;
}

#bottomL2
{
width:705px;
height:195px;
}

#bottomR
{
height:100%;
float:right;
}

------解决方案--------------------

HTML code


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>    
        <style>
            div {
                border:1px solid red;
            }
            .wrap {
                padding:10px;
                overflow:hidden; zoom:1;
            }
            .l {
                float:left;
                border:none;
            }
            .lt,
            .lb {
                width:700px; height:60px;
            }
            .lb { margin-top:10px; }
            .r {
                float:right;
                width:375px; height:132px;
            }
        </style>        
    </head>
    <body>
        <div class="wrap">
            <div class="l">
                <div class="lt">lt</div>
                <div class="lb">lb</div>
            </div>
            <div class="r">r</div>
        </div>
    </body>
</html>