CSS+DIV布局，一个列宽影响另一个列宽，使总宽度自适应（CSS+DIVLayout,onecolumn'swidthdependontheother's）_html/css_WEB-ITnose

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

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

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

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

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

< html >
< head >
< title >
< script type ="text/javascript" >
window.onload = function (){
document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) + " px " ;
}

< 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 ;
}


< body >
< div id ="header" >
header with height of 60px

< div id ="contain" >
< div id ="mainbg" >
< div id ="right" >
< div class ="text" >
< p >
put your tree here


< 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 id ="footer" >
footer

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