CSS左右两列布局宽度100%

来源：http://blog.csdn.net/tangzhongxin/archive/2009/07/31/4398104.aspx

CSS左右两列布局，子级宽度自适应(100%)

/*---------------------------左右布局-------------------------------*/
#main_body {background:#DEE5ED; clear:both; width:100%; padding:0 0 5px 0;}
#main_body_left {float:left;margin-right:-210px;width:200px;}
#main_body_left_inner {border:1px solid #A5B2C0;padding:5px 5px 0 5px; background:#FFF;}
#main_body_right {width:auto;margin:0 5px 0 210px;}
#main_body_right_inner {border:1px solid #A5B2C0; background:#FFF; padding:5px;}

CSS左右两列布局宽度100 - 紫色流苏 - 我的网络笔记薄——紫色流苏

<body>
    <div id="bodymain" style="margin:0 auto;width:638px;">
        <div id="header"><h2>标题</h2></div>
        <div id="wrapper" style="float:right;width:100%;margin-left:-200px;">
            <div id="content" style="margin-left:200px;" mce_style="margin-left:200px;">
                <p>范仲淹</p>
                <h3>苏幕遮（怀旧）</h3>
                <p>
                    碧云天，黄叶地。秋色连波，波上寒烟翠。<br/>
                    山映斜阳天接水。芳草无情，更在斜阳外。<br/>
                    黯乡魂，追旅思。夜夜除非，好梦留人睡。<br/>
                    明月楼高休独倚。酒入愁肠，化作相思泪。
                </p>
                <p>范仲淹</p>
            </div>
        </div>
        <div id="sidebar" style="width:200px; float:left; ">
            <ul>
                <li>姓名</li>
                <li>头像</li>
                <li>年龄</li>
            </ul>
        </div>
        <div id="footer" style="clear:both;" mce_style="clear:both;">版权所有</div>
    </div>
</body>
<body>
<div id="bodymain" style="margin:0 auto;width:638px;">
  <div id="header"><h2>标题</h2></div>
  <div id="wrapper" style="float:right;width:100%;margin-left:-200px;">
   <div id="content" style="margin-left:200px;" mce_style="margin-left:200px;">
    <p>范仲淹</p>
    <h3>苏幕遮（怀旧）</h3>
    <p>
        碧云天，黄叶地。秋色连波，波上寒烟翠。<br/>
        山映斜阳天接水。芳草无情，更在斜阳外。<br/>
        黯乡魂，追旅思。夜夜除非，好梦留人睡。<br/>
        明月楼高休独倚。酒入愁肠，化作相思泪。
    </p>
    <p>范仲淹</p>
   </div>
  </div>
  <div id="sidebar" style="width:200px; float:left; ">
   <ul>
    <li>姓名</li>
    <li>头像</li>
    <li>年龄</li>
   </ul>
  </div>
  <div id="footer" style="clear:both;" mce_style="clear:both;">版权所有</div>
</div>
</body>

关键在于：

#wrapper:float:right;width:100%;margin-left:-200px;

#wrapper里面的#content:margin-left:200px;

#sidebar:width:200px; float:left;

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/tangzhongxin/archive/2009/07/31/4398104.aspx

CSS左右两列布局宽度100%

有话要说