div布局，左边宽度固定，右边自适应

2013-10-31    之前自己一直都在找，现在终于弄懂了，顺便记录下来

 一、左边宽度固定，右边自适应，一行两列的div布局         

方法1、

html代码：

  
<div style="border:1px solid green; height:500px;">
   <div class="subfield_lf">
         aaaa
      </div>
      <div class="subfield_lr">
      bbbbbb
      </div>
</div>

 

css代码：

 <style type="text/css">
.subfield_lf {
    display: inline;
    float: left;
    margin: 0 10px 0 0;
    width: 210px;
 border:1px solid green;
}
.subfield_lr {
    overflow: hidden;
 border:1px  solid red;
}
</style>

 

 

 

 

 

方法2、  

<div id="wrap">
               <div id="jq-content">
                  <div id="jqbody-menu">
                       内容
                    </div>
                <div id="jqbody-content">
                    <div class="body-wrap">
                        内容
                    </div>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>

     css文件：

    body,ul,li{ margin:0; padding:0;}
#wrap{
width:100%;
min-width:1004px;
height:auto;
min-height:10%;
clear:both;
padding-bottom:10px;
border:1px solid green;
}
#jq-content{
height:100%;
clear:both;
margin-left:175px;
 }
#jqbody-menu{
position:relative;
list-style:none;
width:140px;
margin:0px 0px 0px -165px;
float:left;
background-color:#fff;
padding:5px;
border:1px red solid;
}
#jqbody-content{
float:left;
overflow:hidden;
height:100%;
width:100%;
font-weight:normal;
font-size:200%;
background-color:pink
}
.body-wrap{
width:99%;
margin:0 15px 0 0px;
padding:15px 0 0px 10px;
}

.clear{ clear:both;/* 清除浮动 */}