首页说明我采用的是背景覆盖的方法，使左右都可以自适应高度
关键点是，外层容器的高度是由，非浮动的元素决定的，如本例中#leftbg的高度是由#right的高度决定的

<!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">
<head>
        <style type="text/css">
                #rightbg{float:left;width:600px;background:#CCFFFF}
                #leftbg{width:600px;background:#FFCC99}
                #left{float:left;width:100px;background:#FFCC99}
                #right{margin-left:100px;background:#CCFFFF}
        </style>
</head>
<body>
        <div id="rightbg">
                <div id="leftbg">
            <div id="left">1<br />1<br />1<br />1<br />1<br />1<br /><input type="button"  value="点我减高"/><input type="button"  value="点我加高"/></div>
            <div id="right">1<br />1<br />1<br /><input type="button"  value="点我减高"/><input type="button"  value="点我加高"/></div>
                </div>
        </div>
</body>
<!--加高脚本-->
<script>
        function add(div){
                left = document.getElementById(div);
                left.style.height=left.offsetHeight+10+"px";
        }       
        function jian(div){
                left = document.getElementById(div);
                left.style.height=left.offsetHeight-10+"px";
        }
</script>
</html>