Pada bagian ini dijelaskan cara pemakaian properti float yang lazim dipakai pada design tampilan website.
Grid Boxes / Kotak dengan Lebar Sama
Dengan properti float
, mudah untuk membuat lebar kotak konten menjadi sama secara berdampingan:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Kotak dalam Grid</h2>
<p>Kotak mengapung berdampingan</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<p>Beberapa teks di dalam kotak.</p>
</div>
<div class="box" style="background-color:#ccc">
<p>Beberapa teks di dalam kotak.</p>
</div>
<div class="box" style="background-color:#ddd">
<p>Beberapa teks di dalam kotak.</p>
</div>
</div>
<p><strong>Catatan:</strong> Di sini, digunakan clearfix hack untuk tata letak.
Juga digunakan properti box-sizing untuk memastikan kotak tidak pecah karena padding tambahan.</p>
</body></html>
Gambar Berdampingan
Grid Boxes juga dapat digunakan untuk menampilkan gambar secara berdampingan:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Gambar Berdampingan</h2>
<p>Gambar mengapung berdampingan</p>
<div class="clearfix">
<div class="img-container">
<img src="img_5terre.jpeg" alt="Italia" style="width:100%">
</div>
<div class="img-container">
<img src="img_forest.jpeg" alt="Forest" style="width:100%">
</div>
<div class="img-container">
<img src="img_mountains.jpeg" alt="Pegunungan" style="width:100%">
</div>
</div>
<p><strong>Catatan:</strong> Di sini, digunakan clearfix hack untuk tata letak.
Juga digunakan properti box-sizing untuk memastikan gambar tidak pecah karena padding tambahan.</p>
</body></html>
Kotak dengan Tinggi Sama
Pada contoh sebelumnya, telah mempelajari cara membuat kotak secara berdampingan dengan lebar yang sama menggunakan properti float. Namun, tidak mudah membuat kotak dengan ketinggian yang sama. Sehingga yang harus dilakukan yaitu mengatur ketinggian menjadi fixed, seperti pada contoh dibawah ini:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 50%;
padding: 50px;
height: 300px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Kotak dengan tinggi yang sama</h2>
<p>Kotak terapung dengan tinggi yang sama</p>
<div class="clearfix">
<div class="box" style="background-color:#bbb">
<h2>Kotak 1</h2>
<p>Beberapa konten, beberapa konten, beberapa konten</p>
</div>
<div class="box" style="background-color:#ccc">
<h2>Kotak 2</h2>
<p>Beberapa konten, beberapa konten, beberapa konten</p>
<p>Beberapa konten, beberapa konten, beberapa konten</p>
<p>Beberapa konten, beberapa konten, beberapa konten</p>
</div>
</div>
</body></html>
Namun, contoh di atas tidak terlalu fleksibel. Jika mencoba contoh di atas pada ponsel, maka akan melihat bahwa konten kotak kedua akan ditampilkan di luar kotak. Di sinilah CSS3 Flexbox sangat berguna – karena dapat secara otomatis mengatur lebar kotak :
Contoh
Berikut merupakan contoh menggunakan Flexbox untuk membuat kotak menjadi fleksibel:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container .box {
background-color: #f1f1f1;
width: 50%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Kotak fleksibel</h1>
<div class="flex-container">
<div class="box">Kotak 1 - Ini adalah beberapa teks untuk memastikan konten menjadi sangat tinggi. Ini adalah beberapa teks untuk memastikan bahwa konten menjadi sangat tinggi.</div>
<div class="box">Kotak 2 - Tinggi saya akan mengikuti Kotak 1.</div>
</div>
<p>Coba ubah ukuran jendela browser untuk melihat tata letak yang fleksibel.</p>
<p><strong>Catatan:</strong> Flexbox tidak didukung di Internet Explorer 10 atau versi sebelumnya.</p>
</body></html>
Menu Navigasi
Menu navigasi juga dapat dibuat menggunakan float
dengan daftar hyperlink dibuat menjadi menu horizontal:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li><a href="#contact">Kontak</a></li>
<li><a href="#about">Tentang</a></li>
</ul>
</body></html>
Contoh Layout Web
Berikut merupakan contoh membuat layout web menggunakan properti float
:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background-color: white;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<li>Penerbangan</li>
<li>Kota</li>
<li>Pulau</li>
<li>Makanannya</li>
</ul>
</div>
<div class="column content">
<h1>Kota</h1>
<p>Chania adalah ibu kota wilayah Chania di pulau Kreta. Kota ini dapat dibagi menjadi dua bagian, kota tua dan kota modern.</p>
<p>Anda akan mempelajari lebih lanjut tentang tata letak web dan halaman web responsif di bab berikutnya.</p>
</div>
</div>
<div class="footer">
<p>Teks Footer</p>
</div>
</body></html>
Tutorial sebelumnya : Properti Clear dan Clearfix CSS
Tutorial setelahnya : Referensi Semua Properti Float CSS
Semua Tutorial CSS : Tutorial CSS