Home » CSS » Contoh Float Layout CSS

Contoh Float Layout CSS

by Catur Kurnia Sari
by Catur Kurnia Sari

Halaman ini khusus berisi contoh penggunaan float yang umum digunakan pada sebuah coding.

Dengan menggunakan properti float, mudah untuk membuat kotak mengapung secara berjajar:

<!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>Grid pada box</h2>
<p>Box mengapung secara berjajar:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <p>Teks dalam box.</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>Teks dalam box.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>Teks dalam box.</p>
  </div>
</div>

<p>Perhatikan code ini juga menggunakan clearfix hack untuk menangani flow layout, dan juga menambahkan properti box-sizing untuk memastikan bahwa box tidak rusak karena penambahan padding. Coba hapus kode box-sizing untuk melihat efeknya.</p>

</body>
</html>

Apa itu box-sizing?

Kita dapat dengan mudah membuat tiga box mengapung dengan posisi berjajar. Namun, ketika kita ingin menambahkan ukuran lebih besar atau lebar setiap box (misalnya padding atau border), box akan rusak. Properti box-sizing memungkinkan kita untuk menyertakan padding dan border ke dalam total width dan height box, dan memastikan bahwa padding tetap berada di dalam box dan box tidak rusak.

Section Artikel

Gambar Berjajar

Grid box juga dapat digunakan untuk menampilkan gambar secara berjajar.

Berikut contoh penggunaanya:

<!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>Grid Gambar</h2>
<p>Float Gambar berjajar:</p>

<div class="clearfix">
  <div class="img-container">
  <img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Italy" style="width:100%">
  </div>
  <div class="img-container">
  <img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="img-container">
  <img src="https://dosenit.com/wp-content/uploads/2020/09/css-float-nanas.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

<p>Perhatikan code ini juga menggunakan clearfix hack untuk menangani flow layout, dan juga menambahkan properti box-sizing untuk memastikan bahwa box tidak rusak karena penambahan padding. Coba hapus kode box-sizing untuk melihat efeknya.</p>

</body>
</html>

Menyamakan Tinggi Box

Dalam contoh sebelumnya, telah dijelasakan cara mengapungkan box secara berjajar dengan lebar yang sama. Tetapi, membuat box terapung dengan ketinggian yang sama tidaklah mudah. Solusi untuk memperbaiki hal tersebut dengan cepat adalah dengan mengatur ketinggian (height) tetap, seperti pada contoh di bawah ini:

<!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>Menyamakan Height Box</h2>
<p>Box mengapung dengan tinggi yang sama:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
  <h2>Box 1</h2>
  <p>Ini konten, ini konten, ini konten</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <h2>Box 2</h2>
  <p>Ini konten, ini konten, ini konten</p>
  <p>Ini konten, ini konten, ini konten</p>
  <p>Ini konten, ini konten, ini konten</p>
  </div>
</div>

<p>Contoh ini tidak terlalu fleksibel. Tidak masalah menggunakan tinggi default CSS jika dapat menjamin setiap box akan selalu memiliki jumlah konten yang sama di dalamnya, tetapi biasanya tidak selalu demikian. Jika Anda mencoba contoh di atas pada ponsel (atau mengubah ukuran jendela browser), Anda akan melihat bahwa konten box kedua akan ditampilkan di luar box. </p>
<p> Kembali ke tutorial dan temukan solusi lain, jika ini bukan yang Anda inginkan.</p>

</body>
</html>

Contoh ini tidak terlalu fleksibel. Tidak masalah menggunakan tinggi default CSS jika dapat menjamin setiap box akan selalu memiliki jumlah konten yang sama di dalamnya, tetapi biasanya tidak selalu demikian. Jika Anda mencoba contoh di atas pada ponsel (atau mengubah ukuran jendela browser), Anda akan melihat bahwa konten box kedua akan ditampilkan di luar box. Di sinilah CSS3 Flexbox akan sangat berguna – karena dapat meregangkan box secara otomatis menjadi box terpanjang.

Contoh :

<!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>Box Fleksibel</h1>

<div class="flex-container">
  <div class="box">Kotak 1 - Ini adalah teks untuk memastikan bahwa konten menjadi sangat tinggi. Ini adalah teks untuk memastikan bahwa konten menjadi sangat tinggi.</div>
  <div class="box">Kotak 2 - Tinggiku akan mengikuti Kotak 1.</div>
</div>

<p>Coba ubah ukuran jendela browser untuk melihat tata letak yang fleksibel.</p>
<p><strong>Note:</strong> Flexbox tidak mendukung Internet Explorer 10 atau versi sebelumnya.</p>

</body>
</html>

Satu-satunya masalah dengan Flexbox adalah Flexbox tidak berfungsi di Internet Explorer 10 atau versi sebelumnya.

Navigation Menu

Menggunakan float pada list hyperlink untuk membuat menu secara 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">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Contoh Web Layout

Penggunaan float juga sangat umum untuk mengatur seluruh tata letak (layout) web.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.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>Makanan</li>
    </ul>
  </div>

  <div class="column content">
    <h1>Kota</h1>
    <p>Chania adalah ibu kota wilayah Chania di pulau Crete. Kota Chania 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 selanjutnya.</p>
  </div>
</div>

<div class="footer">
  <p>Hubungi Kami</p>
</div>

</body>
</html>

All CSS Float Properties

PropertiDeskripsi
box-sizingMenentukan bagaimana menghitung lebar dan tinggi elemen: apakah harus menyertakan padding dan border atau tidak
clearMenentukan disisi mana elemen yang dapat mengapung di sisi elemen float
floatMenentukan bagaimana elemen harus mengapung
overflowMenentukan apa yang terjadi jika konten meluap dari kotak elemen
overflow-xMenentukan apa yang harus dilakukan dengan tepi kiri / kanan konten jika melebihi area konten elemen
overflow-yMenentukan apa yang harus dilakukan dengan tepi atas / bawah konten jika melebihi area konten elemen

You may also like