Contoh Penggunaan Properti Float Dengan CSS

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

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>

Jalankan Contoh

Tutorial sebelumnya : Properti Clear dan Clearfix CSS
Tutorial setelahnya : Referensi Semua Properti Float CSS
Semua Tutorial CSS : Tutorial CSS