如何讓CSS 3列留在他們的位置？

Question

我的3列布局（960.css）出現問題。
這是條件：

C-左，C-中心，C-右

中心柱內的查詢ORDER BY id_post DESC LIMIT 6顯示文章多達6篇作品，但是當我使用LIMIT 12它不」噸。列 - 權利將在側面。

有什麼想法？

HTML：

<div class="grid_4"> 
    <div class="populer_left"> 
     <div class="title_kiri"> 
      Berita Terpopuler 
     </div> 
     <div class="batas_tengah"></div> 
     <div class="b_populer"> 
      <?php include 'beritapopuler.php';?> 
     </div> 
    </div> 
</div> 
<div class="grid_7"> 
    <div class="populer_center"> 
     <div class="title_tengah"> 
      Berita Terbaru 
     </div> 
     <div class="batas_tengah"></div> 
     <div class="isi_berita"> 
      <?php include 'loadar.php'; ?> 
     </div> 
    </div> 
</div> 
<div class="grid_5"> 
    <div class="populer_right"> 
     <div class="title_kanan"> 
      Opini 
     </div> 
     <div class="batas_tengah"></div> 
     <div class="b_opini"> 
      <?php include 'beritaopini.php'; ?> 
     </div> 
    </div> 
</div> 

風格：

.populer_left { 
     float:left; 
     width:220px; 
     height:auto; 
     clear:both; 
     padding-bottom:15px; 
     background:#29aa6b; 
     border-radius:2px; 
} 

.populer_right { 
     float:right; 
     width:280px; 
     height:auto; 
     clear:both; 
     padding-bottom:15px; 
     background:#3f83ab; 
     border-radius:2px; 
} 

.populer_center { 
     float:left; 
     display: inline-block; 
     vertical-align:top; 
     width:400px; 
     height:auto; 
     background:#0e62aa; 
     border-radius:2px; 
} 

Answer 1

您可以使用display table，並table-cell財產。

這裏：小提琴​​

#wrapper { border: 2px solid red;overflow:hidden; display: table; width:900px;} 
.populer-left { 
    width: 220px; 
    display:table-cell; 
    float:left; 
    padding-bottom:15px; 
    background:#29aa6b; 
    border-radius:2px; 
} 
.populer-center { 
    display:table-cell; 
    width: 400px; 
    float:left; 
    background-color: green; 
    background:#0e62aa; 
    padding-bottom:15px; 
    border-radius:2px; 
} 
.populer-right { 
    display:table-cell; 
    width: 280px; 
    float:left; 
    padding-bottom:15px; 
    background:#3f83ab; 
    border-radius:2px; 
}