CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIV Layout, one column's width depend on the other's）

一个客户说要用DIV+CSS布局，两列，其中导航列宽度不确定（由里面的TreeView控件确定），而与它并列的内容列宽度要做到自适应，也就是

内容列宽度+导航列宽==固定值（总宽度）

但是，内容列宽度和导航列宽都没有一个定值，而网上的大多自适应列宽代码都是基于一个定值的

无奈，我写Winform出身的对CSS+DIV知之甚少，只能通过JavaScript来完成了，效果还可以，IE7.0和Firefox2.0测试通过

下面的代码中，导航列没有定义宽度，其实际宽度要靠里面的内容而确定：

效果图，右边为导航列（不习惯吧，呵呵，客户阿拉伯的）：

<html>
<head>
    <title></title>
    <script type="text/javascript">
          window.onload = function(){
           document.getElementById("left").style.width=(773-(document.getElementById("right").clientWidth))+"px";
      }
    </script>
    <style type="text/css">
        body
        {
            background: #999;
            text-align: center;
            color: #333;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            margin: 0px;
        }
        #header
        {
            margin-right: auto;
            margin-left: auto;
            padding: 0px;
            width: 776px;
            background: #EEE;
            height: 60px;
            text-align: left;
        }
        #contain
        {
            margin-left: auto;
            margin-right: auto;
            width: 776px;
        }
        #mainbg
        {
            float: left;
            padding: 0px;
            width: 776px;
            background: #60A179;
        }
        #right
        {
            float: right;
            margin: 2px 0px 2px 0px;
            padding: 0px;
            background: #ccd2de;
            min-height:300px;
            _height:300px;
            text-align: left;
        }
        #left
        {
            float: right;
            margin: 2px 2px 0px 0px;
            padding: 0px;
            background: #F2F3F7;
            width: 574px;
            min-height:600px;
            _height:600px;
            text-align: left;
        }
        #footer
        {
            clear: both;
            margin-right: auto;
            margin-left: auto;
            padding: 0px;
            width: 776px;
            background: #EEE;
            height: 60px;
        }
        .text
        {
            margin: 0px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="header">
        header with height of 60px
    </div>
    <div id="contain">
        <div id="mainbg">
            <div id="right">
                <div class="text">
                    <p>
                        put your tree here</p>
                </div>
            </div>
            <div id="left">
                <div class="text">
                the width of this div is dependent on the right div
                    left<br />
                    left<br />
                    left<br />
                    left<br />

                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</body>
</html>

另外，修改之前的原始代码是我收藏的，好像网上copy很多，也不知道哪里才是原始出处了，尽管做了扩充和修改，但还是应该注明一下，如是您是原作者，请联系我blodfox777@hotmal.com