网页布局宽度设置

Question

#outer
        {
         background-color:Gray;
         margin:10px auto;
         min-width:700px;
         max-width:900px;
         width:expression(document.body.clientWidth < 700? "780px" : document.body.clientWidth > 900? "900px" : "auto");
         }
        #leftf {
            background-color: #E8F5FE;
            border: 1px solid #A9C9E2;
            float: left;
            height: 300px;
            width: 20%;
        }
        #rightf {
            background-color: #F2FDDB;
            border: 1px solid #A5CF3D;
            float: left;
            height: 300px;
            width: 70%;
        }

 

<div id="outer">

　　<div id="left"></div>

　　<div id="right"></div>

</div>

我是想把左边div固定宽度 那么右边的div宽度该怎么算

Answer 1

不用这么写#rightf{&nbsp; height: 300px;&nbsp; padding-left: 20%;}这样就可以空出左边的空间了，是标准的左右两列布局

Answer 2

#outer{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width:100%;&nbsp;&nbsp;&nbsp;&nbsp; float:right;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; margin-left:-250px;&nbsp;&nbsp;&nbsp;&nbsp; height:100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #leftf {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: #E8F5FE;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid #A9C9E2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float: left;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: 100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 250px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; #rightf {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: #F2FDDB;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid #A5CF3D;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin:0 0 0 266px;&nbsp;&nbsp;&nbsp;&nbsp; border:1px solid black;&nbsp;&nbsp;&nbsp;&nbsp; height:100%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<div id="outer">　　<div id="leftf"></div>&nbsp;&nbsp;&nbsp;&nbsp; <div id="rightf"></div></div>