Untuk mengatur posisi teks box kiri kanan pada website dapat digunakan fload dan clear CSS, jika menginginkan box kekiri diisi dengan left, maka box akan kekiri dan menyediakan tempat kosong disebelah kanan untuk diisi dengan elemen lainnya, begitu pula sebaliknya.
A. Property Float dan Clear
Property ini sering membuat tampilan menjadi berantakan, untuk menormalkan agar elemen lain tidak berpengaruh dapat digunakan property clear
sintaksnya penulisan float dalam CSS:
selector {
float: values;
}“values” bisa diganti dengan:
- left: elemen akan mengambang ke sisi kiri container-nya. Bisa juga menggunakan value inline-start, elemen akan mengambang ke sisi kiri container. Elemen lain di sekitar elemen yang mengambang akan mengisi ruang di sisi kanannya.
- right: elemen akan mengambang ke sisi kanan container-nya. Bisa juga menggunakan value inline-end, menjadikan elemen mengambang ke sisi kanan container, dengan elemen lain mengisi ruang di sisi kirinya
- none: elemen tidak akan mengambang. Ini adalah nilai default, elemen akan ditampilkan di tempatnya dalam normal flow
- inherit: elemen akan mewarisi nilai properti float dari elemen induk.
B. Contoh Penggunaan Float
Berikut adalah contoh penggunaan fload, sediakan file bg.jpg, letakkan satu folder dengan CSS – float
<!DOCTYPE HTML>
<html>
<head>
<title>CSS - float</title>
<style type="text/css">
.kiri{
width: 200px;
float: left;
margin-right: 20px;
}
.kanan{
width: 200px;
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<p><img src="CSS - float.jpg" class="kiri">Box Kekiri = Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com</p>
<p><img src="CSS - float.jpg" class="kanan">Box Kekanan = Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com, Tulisan Mencoba CSS - float syaiflash.com</p>
</body>
</html>
Leave a Reply