Membuat kolom dengan mudah tanpa floating

Kolom merupakan bagian dari template blogger. Tergantung layoutnya seperti apa. Namun secara umum—sebuah template pasti akan membutuhkan kolom untuk mengatur bagian posting dengan sidebar atau paling sering—dibagian footer untuk tiga widget.

Kolom yang saya maksud disini bukan kolom untuk paragraf, melainkan kolom dasar untuk layouting. Sebenarnya juga bisa untuk paragraf, tetapi lebih baiknya kalau paragraf dengan multiple column css. Bisa kalian pelajari di sini.

Sebelumnya kita mengenal markup kolom seperti ini:

<div id='container'>
  <div class='column col1'></div>
  <div class='column col2'></div>
  <div class='column col3'></div>
  <div style='clear:both'/>
</div>

Dengan CSS seperti ini:

#container {
  display:block;
  clear:both;
  overflow:hidden;
}
.column {
  width:200px;
  height:250px;
  float:left;
}

Dengan cara seperti itu sebenarnya sudah bisa untuk membuat kolom. Masalahnya akan muncul ketika kita membuat border-right yang hanya dimiliki col1 dan col2, dimana ketiga-tiganya memiliki tinggi yang berbeda. Itu akan menyebabkan border-rightnya tidak sampai ke kontainer.

Permasalahannya bila menggunakan floating.

Untuk mengatasi permasalahan tersebut saya menemukan solusinya. Yaitu hanya dengan property css display yang ternyata memiliki nilai table dan beberapa nilai table lainnya untuk membuatnya seperti tabel. Sehingga tidak memerlukan css floating. Lengkapnya mengenai CSS display bisa kalian pelajari di sini.

Solusi

<div id='container'>
  <div class='column col1'></div>
  <div class='column col2'></div>
  <div class='column col3'></div>
</div>

#container {
  display:table; /* tampilkan seperti `tabel` */
  border:1px solid red;
  width:900px;
  margin:5em auto;
}
.column {
  display:table-cell; /* tampilkan seperti `cell` */
  width:300px;
  padding:1em;
  box-sizing:border-box;
}
.col1,.col2 {border-right:1px solid blue;}

Demo

Kelebihan menggunakan ini adalah:

1. tidak perlu menggunakan CSS floating
2. tidak perlu mendeklarasikan clear dan overflow
3. tidak perlu menambahkan tag tambahan untuk meratakan (<div style='clear:both'/>)
4. tidak harus mendeklarasikan width pada kontainer dan column-nya

Menurut saya lebih banyak kelebihannya dibanding dengan CSS floating. Semua support browser, hanya bermasalah di IE (Note: The values "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", and "table-row-group" are not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.)