Clear CSS Float

By | December 12 2010 | Artikel,HTML & CSS | No Comments

Mari kita lihat problem yang kita temui terlebih dahulu.

Hasil yang diinginkan adalah

Layout seperti ini biasanya sering dilihat di kolom berita, forum dan yang seperti pada website gizmodo berikut :

Standard koding biasa :

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Herman Taniwan</title>

<style>
.main_box{
	width:700px;
	border:1px solid red;
}

.image_box{
	width:200px;
	height:200px;
	background:#096;
}

.desc_box{
	width:500px;
	background:#900;
}
</style>

</head>
<body>
	<div class="main_box">
    	<div class="image_box "></div>
        <div class="desc_box ">Lorem ipsum …...</div>
    </div>
	<div class="main_box">
    	<div class="image_box"></div>
        <div class="desc_box ">Sed ut …..</div>
    </div>
</body>
</html>

Setelah ditambah float left :

.left{
	float:left;
}

<div class="main_box">
    	<div class="image_box left"></div>
        <div class="desc_box left">Lorem ipsum dolor ……div>
 </div>

<div class="main_box">
    	<div class="image_box left"></div>
        <div class="desc_box left"> Sed ut ……div>
 </div>

Hasilnya adalah seperti contoh diatas dimana border merah yang membungkus dan seharusnya otomatis tingginya terhadap besar objek menjadi menyusut hingga seperti ini. Penyebab dari hal ini adalah penggunaan float menjadikan flow (Alur posisi CSS menjadi tidak normal). Ini adalah problem yang lumayan sering saya temui dalam konversi PSD -> HTML. Layout akan normal kembali apabila border dapat membungkus seperti pada gambar pertama.

Dulu solusi yang saya temukan adalah dengan menambah float : left lagi pada box pembungkus (#main_box dalam hal ini) menjadi seperti berikut :

SOLUSI BERBAHAYA !

.main_box{
	width:500px;
	border:1px solid red;
	float:left;/*TAMBAH DISINI*/
}

dan akhirnya bisa :

Solusi ini sah – sah saja sebenarnya apabila yang anda temui layoutnya hanya ada satu atau terletak di bagian yang paling kiri atau dipaling kanan serta tidak didalam atau dibungkus apapun. Ketika saya bertemu dengan situasi di dimana sectionnya ada di tengah – tengah saya pun sempat bingung dan akhirnya terpaksa membuatnya menjadi fixed container pembungkusnya yang sebenarnya jelek dan tidak dinamis sama sekali.

Contoh :

.main_box{
	width:700px;
	height:300px;
    border:1px solid red;
}

Dan efek sampingnya adalah ketika teks bertambah banyak border kita tak mampu bertambah panjang.

SOLUSI AMAN
Dan disinilah dimana teknik Float Clearing beraksi :
Cara yang paling sering saya gunakan adalah dengan menambahkan tag berikut ke dalam main_box.

<div class=”clear”></div>

Cara penambahannya :

TAMBAH CLASS CLEAR

.clear{
	clear:both;
}

Dan tag-nya di dalam tubuh main_box persis sebelum tutup tagnya :

<div class="main_box">
     <div class="image_box left"></div>
     <div class="desc_box left"> Lorem Ipsum …. </div>
     <div class="clear"></div>
</div>

Dan akhirnya hasilnya pun sama, lebih aman dan ok.

Cara ini menurut saya adalah yang paling singkat dan sering saya gunakan. Sebenarnya masih ada cara lain lagi selain ini.

Anda juga bisa memakai teknik class clearfix

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Dimana ini ditambahkan pada #main_box menjadi

<div class="main_box clearfix">
<div class="image_box left"></div>
<div class="desc_box left"> Lorem Ipsum …. </div>
</div>

Berdasarkan hasil riset saya, teknik diatas katanya tidak sepenuhnya berfungsi 100% dalam beberapa kondisi (Maaf belum pernah bertemu). Hasil test diatas telah saya coba di browser IE6, IE7, FF3+, Chrome, Opera dan Safari. Semuanya OK!

Untuk mengetahui lebih lanjut mengenai masalah float dan dasar – dasarnya bisa mengunjungi situs berikut :
http://www.positioniseverything.net/easyclearing.html
http://css-tricks.com/all-about-floats/

Terimakasih telah membaca dan semoga bermanfaat.

Written by Herman Taniwan

Founder hermantaniwan.com, Website tutorial berisi mengenai hal - hal yang mensupport interaktifitas di indonesia. Seorang Flash and Flex Developer,PHP Developer, Public Speaker, Chess and Pixel art hobbyist.

Related Posts

  1. Google Fonts
  2. Scroller Up
  3. Cross Browser Copy
  4. AdobeCampLogo

Add Comment

Comments Box

Iklan GRATIS (125x125)
Iklan GRATIS (125x125)
Iklan GRATIS (125x125)