圣杯布局，不太明白为什么后面的元素会飘上来

 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>
坚持下去就能成功