Belajar CSS FLoating

Float, merupakan elemen yang berguna mengatur posisi elemen html secara horizontal yang berpatokan pada elemen-elemen yang membungkusnya, yaitu div, Table, Browser dan lain- lain. elemen ini hanya dapat mengatur posisi secara horizontal, sehingga hanya memiliki empat buah nilai yang bisa dipakai yaitu: LEFT, RIGHT, NONE dan INHERIT

Contoh Kode :

?

1 2 3 4 5 6 7

img   {   float:right;   }

Jika anda menempatkan beberapa elemen secara float satu sama lain, mereka akan floating disamping yang lainnya. Contoh dibawah ini kita akan membuat sebuah gambar dengan menggunakan property float :

?

1 2 3 4 5 6 7 8 9 10 11 12 13

.thumbnail   {   float:left;   width:110px;   height:90px;   margin:5px;   }

Cara kerja elemen ini adalah mengambangkan secara horizontal Jika di sebelah kiri elemen float ada elemen float lainnya, secara otomatis elemen float yang kedua akan bergeser di samping elemen float pertama selama jendela browser masih cukup, jika jendela browser tidak mencukupi maka dengan terpaksa elemen float kedua akan bergeser di bawah elemen float pertama.

Ok, penjelasan tentang float dan positioning selesai. Setelah memahami beberapa kode-kode diatas, saya harap anda dapat melakukan percobaan terkait dengan positioning dan floating.