How to make CSS 3 columns stay in their posisiton? - css

Question

I have got a problem with my 3 columns layout (960.css).
This is the condition:
c-left,c-center,c-right
The query ORDER BY id_post DESC LIMIT 6 inside center column to show article as many as 6 articles works, but when i use LIMIT 12 it doesn't. columns-right will be in down side.
Any thoughts?
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>
Style:
.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

You can use display table, and table-cell property.
Here: Fiddle http://jsfiddle.net/LUCNY/10/
#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;
}