<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

Di dalam div-nya ada tag h1 dan p, biar keliatan ada isinya. Nah, hasil dari kode html di atas bisa dilihat di sini. Terlihat khan bahwa div yang id-nya box2 terletak di bawah box1, ya itu karena sifatnya tag div, yang didefinisikan duluan akan terletak paling atas. Selanjutnya, kita coba menggunakan teknik float pada div-div ini, sebelumnya dua div ini dikasih background dulu biar lebih keliatan kotaknya.

Yang pertama di float, hmm.. box1 aja deh, di float left. Hasil yang diharapkan adalah box1 berada di sebelah kirinya box2. O iya, beberapa cara pada contoh kali ini sebenarnya sudah pernah diterapkan ketika saya membahas tentang cara membuat layout tanpa tabel, tapi diulang lagi dikit biar lebih paham..hehe…

#box1{
  float: left;
  background: green;
  color: white;
}

#box2{
  background: purple;
  color: white;
}

Lalu kita lihat hasilnya di sini, hmm… tidak ada perubahan ya box1 nya tetap berada di atas box2, kenapa itu terjadi? Apakah floatnya tidak berjalan? Sebenarnya float yang diberikan ke box1 itu sudah berjalan, box1 sudah mengambang/ melayang ke arah kiri. Namun, width / lebar dari box1 belum ditentukan dan ini membuat lebar dari box1 adalah sama dengan lebar browser, jadinya karena tidak muat maka box2 terpaksa terletak di bawah box1 tidak di sebelah kanannya, nah coba tentukan width dari box1 berapa pun asal jangan melebihi lebar browser Anda, lalu refresh browsernya dan liat hasilnya.

Sekarang yang box2 nya, di float left atau right? bisa keduanya sih, tapi hasilnya akan sedikit berbeda, kalau box2nya di float left, box2 akan berada di sebelah kanan box1 serta box1 dan box2 akan berdempetan kecuali kalau box1 dan box2 diset marginnya.

#box1{
  float: left;
  background: green;
  color: white;
  width: 400px;
}

#box2{
  float: left;
  background: purple;
  color: white;
  width: 300px;
}

Hasilnya ini. Sedangkan jika box2 di float right, tetap box2 ada di kanannya box1 tapi akan ada sedikit jarak antara box1 dan box2, coba lihat ini untuk yang box2-nya di float right.

Sudah mengerti??

Lalu, gimana kalau ada tiga div trus ingin dijadikan tiga kolom?? Kita coba saja, misal ketiga divnya seperti ini ,,hmmm

<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box3">
 <h1>Box3</h1>
 <p>Etiam eu est est,....</p>
</div>

Nah, css-nya seperti apa?? simpelnya sih seperti ini :

#box1{
  float: left;
  background: green;
  color: white;
  width: 150px;
  height: 700px;
}

#box2{
  float: left;
  background: purple;
  color: white;
  width: 300px;
  height: 700px;
}

#box3{
  float: left;
  background: cyan;
  color: black;
  width: 150px;
  height: 700px;
}

Hasilnya

Box1, box2 dan box3 di float left, trus kalau mau box2 / box3 di float right bisa juga atau kalau semua ingin di float right juga bisa, silahkan dicoba-coba sendiri dan liat perbedaannya..

Download Source Code

Apa itu float?

Float itu bahasa inggris, klo di indonesia-in tuh artinya mengambang atau melayang. contohnya aja klo di restoran mesen minuman avocado float, nah di minumannya khan selain ada alpukatnya ada juga yang mengambang-ngambang di atasnya .

Di css ada properti yang namanya float. Valuenya itu ada right, left dan none. Lah, trus kalau kita pake properti ini apa yang mengambang?? yang mengambang itu adalah selektor (bisa tag, id atau class) yang dikasih properti float di css. Mengambangnya bisa ke kiri atau ke kanan tergantung dari valuenya.

Contohnya aja pas membuat layout tanpa tabel, di situ khan seharusnya posisi sidebarnya berada di atas posting. Karena di css-nya sidebar di kasih properti float yang valuenya left, trus yang posting juga dikasih float tapi valuenya right, makanya sidebarnya melayang/mengambang ke sebelah kirinya posting, begitu juga yang posting mengambang ke kanannya sidebar.

Float ini gak cuman bisa di kasih di tag div seperti yang dicontohkan di atas, tapi juga bisa dikasih ke tag-tag html yang lain, baik yang inline tag atau block tag. Dan juga, penggunaan float ini biasanya berhubungan dengan pembuatan layout dari suatu website.

Contoh penggunaan float yang lain nih, hmm… misal pengen buat kyk gini, pictnya :

Pertama-tama, kita buat dulu paragraf yg isinya kata-kata gak jelas di atas . Kira-kira gini :

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</p>

trus biar agak rapih dikit paragrafnya kita kasih css dikit :

 p {
      width: 300px;
      padding: 5px;
      border: 1px solid #ccc;
    }

tampilannya jadi gini :

Lalu, kita susupi awal paragraf tadi dengan gambar yang telah disediakan sebelumnya. HTMLnya jadi gini:

<p><img src="images/me.gif" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, arcu id suscipit faucibus, sem felis pharetra ante, at porttitor ligula eros et ante. Phasellus vestibulum, nunc eget malesuada vehicula, odio augue pharetra dui, eu pretium orci turpis at urna. Vivamus est enim, malesuada sit amet euismod vel, tincidunt sit amet nulla. Nullam orci magna, elementum sit amet malesuada eu, consectetur vel augue. Proin ut dui eu nibh dapibus porta. Nunc vel urna tellus, vitae consectetur turpis. Quisque dictum sodales gravida. Ut congue gravida mauris at gravida. Donec lacinia lacus a mi tempus cursus. Donec auctor tortor ac orci consectetur adipiscing. Integer at justo tellus.
</p>

Nah, setelah dikasih gambar jadinya gini klo diliat di browser :

Posisi gambarnya jadi aneh ya. Biar agak bagus, kita akalin gambarnya pake float. Di css ditambahkan :

img{
  float: left;
}

Jadi, gambarnya itu akan mengambang ke kiri (karena value floatnya left), dan tulisan di sekitarnya akan ikut menyesuaikan (terpengaruh). Gini kira2 :

Abis itu, gambarnya dikasih border sama margin biar lebih sip lagi,

img{
 float: left;
 border: 1px solid #ccc;
 margin: 2px 10px 0px 0px;
}

Jadi deh..

Oke,,segitu dulu ya. Bersambung ke bagian duanya hehe :D

Download Souce Code