Metode yang umum digunakan untuk tata letak CSS: float:none|left|right
Nilai:
tidak ada:?Nilai default. Benda tidak mengapung
kiri: teks mengalir ke kanan objek
kanan: teks mengalir ke kiri objek
Cara kerjanya, lihat contoh satu baris dan dua kolom
kode xhtml:
| Berikut isi kutipannya: <div id="bungkus"> <div id="column1">Ini adalah kolom pertama</div> <div id="column2">Ini adalah kolom kedua</div> <div class="clear"></div> /*Ini bertentangan dengan maksud standar web, ini hanya berarti bahwa elemen di bawahnya perlu dibersihkan*/ </div> |
Kode CSS:
| Berikut isi kutipannya: #bungkus{lebar:100;tinggi:otomatis;} #kolom1{float:kiri;lebar:40;} #kolom2{float:kanan;lebar:60;} .clear{clear:keduanya;} |
posisi:statis|mutlak|tetap|relatif
Nilai:
statis:?Nilai default. Tidak ada pemosisian khusus, objek mengikuti aturan pemosisian HTML
Absolut:? Seret objek keluar dari aliran dokumen dan gunakan atribut kiri, kanan, atas, bawah, dan lainnya untuk melakukan pemosisian absolut relatif terhadap objek induk terdekat dengan pengaturan pemosisian terbanyak. Jika tidak ada objek induk, objek body digunakan. Dan kaskadenya ditentukan melalui atribut z-index
diperbaiki:?Tidak didukung. Penentuan posisi objek mengikuti metode absolut. Namun ada beberapa aturan yang harus diikuti
relatif:?Objek tidak dapat ditumpuk, tetapi akan diimbangi dalam aliran dokumen normal berdasarkan atribut kiri, kanan, atas, bawah, dan lainnya.
Ini mengimplementasikan contoh satu baris dan dua kolom
kode xhtml:
| Berikut isi kutipannya: <div id="bungkus"> <div id="column1">Ini adalah kolom pertama</div> <div id="column2">Ini adalah kolom kedua</div> </div> |