1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>css 布局</title> 6 7 <style type="text/css"> 8 body{ 9 min-width: 988px; 10 } 11 12 #head{ 13 text-align: center; 14 } 15 #container{ 16 padding-left: 200px; /*left column width*/ 17 padding-right: 150px; /*right column width*/ 18 overflow: hidden; 19 20 } 21 #container .column{ 22 position: relative; 23 float: left; 24 } 25 26 #center{ 27 28 background:#eee; 29 padding: 10px 20px; 30 margin: 0 15px; 31 width: 100%; 32 min-height: 300px; 33 overflow:visible; 34 } 35 36 #left{ 37 width:180px; 38 background:green; 39 margin-left:-100%; 40 right: 270px; /*180+60(padding total)+ 30(margin)*/ 41 padding:0 10px; /* LC fullwidth + CC padding */ 42 min-height: 300px; 43 } 44 45 #right{ 46 width: 130px; 47 background:yellow; 48 padding: 0 10px; 49 margin-right: -240px; /*fullwidth + center column padding 尽量大一点，chrome浏览器下，这个div浮动不上来*/ 50 51 min-height: 300px; 52 } 53 54 #footer{ 55 clear: both; 56 text-align: center; 57 } 58 59 /*IE6 fix*/ 60 61 * html #left { 62 left:100px; 63 } 64 </style> 65 </head> 66 67 <body> 68 <div id="head"> 69 <h1>head</h1> 70 </div> 71 72 <div id="container"> 73 <div id="center" class="column"> 74 center 75 </div> 76 77 <div id="left" class="column"> 78 left 79 </div> 80 81 <div id="right" class="column"> 82 right 83 </div> 84 </div> 85 86 <div id="footer"> 87 <h1>footer</h1> 88 </div> 89 </body> 90 </html>