一，左侧div，float设为left，右侧div设置margin-left属性为左侧div的宽度，外div清除浮动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;padding: 0;} 9 body,html{height: 100%;} 10 .container{ 11 width: 1000px; 12 margin:0 auto; 13 background: #c6c; 14 overflow: hidden; 15 height: 100%; 16 } 17 .side{ 18 width: 200px; 19 background: #c66; 20 height: 100%; 21 float: left; 22 /*解决IE6的3px-Bug*/ 23 /*IE6下当浮动元素与非浮动元素相邻时，3px的Bug就会出现，它会偏移3像素。*/ 24 _margin-right: -3px; 25 } 26 .main{ 27 background: #6c6; 28 height: 100%; 29 margin-left: 200px; 30 } 31 </style> 32 <body> 33 <div class="container"> 34 <div class="side">side</div> 35 <div class="main">main</div> 36 </div> 37 </body> 38 </html>
二，左侧div，float设为left，右侧div设置margin-left属性为左侧div的宽度，外div清除浮动，设置为相对定位，右侧设置绝对定位，宽度100%。（此方法代码比一多了好多代码）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 .container{width: 1000px;margin:0 auto;background: #c6c;position: relative;overflow: hidden;} 9 .side{width: 200px;background: #c66;height: 500px;float: left;} 10 .main{background: #6c6;height: 500px;margin-left: 200px;position: absolute;top:0;width: 100%;} 11 </style> 12 <body> 13 <div class="container"> 14 <div class="side">side</div> 15 <div class="main">main</div> 16 </div> 17 </body> 18 </html>
3.左侧绝对定位
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 .container{ 9 width: 1000px; 10 margin:0 auto; 11 background: #c6c; 12 position: relative; 13 } 14 .side{ 15 width: 200px; 16 background: #c66; 17 height: 500px; 18 position: absolute; 19 top:0; 20 left: 0; 21 } 22 .main{background: #6c6;height: 500px;margin-left: 200px;} 23 </style> 24 <body> 25 <div class="container"> 26 <div class="side">side</div> 27 <div class="main">main</div> 28 </div> 29 </body> 30 </html>