CSS float

Atribut CSS float (mengambang)

Membuat elemen mengambang (floating element)

Salah satu teknik membuat tampilan responsive adalah dengan membuat elemen mengambang. Contoh dibawah ini terdiri dari 3 elemen dalam satu kontainer yang disetting dengan CSS float:left

Dimensi halaman pada perangkat Anda adalah :
( )
Elemen "DEMO" akan berposisi berjajar kebawah pada ukuran layar maksimal 800px.
Elemen "DEMO" akan berposisi sejajar pada ukuran layar minimal 800px keatas.

Kiri (left) 20%

Tengah (center) 60% ("DEMO")

Kanan (right) 20%

Lihat HTML  Lihat kode CSS.

Kode CSS elemen float

<style>
  .kontainer{  /* CSS kontainer */
  position: relative;
  width: 100%;
  }
  
  .kiri,.kanan,.tengah{
  float: left;   /* CSS float */
  padding: 10px;
  }
  
  /* CSS panjang elemen */
  .kiri,.kanan{
  width:20%
  background: #333;
  color: #fff
  }
  .tengah{
  width:60%
  background: #f1f1f1;
  }
  
  .clearfix{  /* CSS clearfix */
  content:"";
  display: table;
  clear: both;
  }
  
  /* Kueri untuk ukuran layar maksimal 800px */
  @media (max-width:800px){
  .kiri,.kanan,.tengah{width:100%;}
  }
</style>
      

Kode HTML elemen float

<div class='kontainer clearfix'>
      <div class='kiri'>Kiri (left) 20%</div>
      <div class='tengah'>Tengah (center) 60%</div>
      <div class='kanan'>Kanan (right) 20%</div>
</div>
      

Elemen float berdampak pada tata-letak elemen dibawahnya, sehingga pada kontainer elemen ditambahkan clearfix untuk mencegah perubahan tata-letak tersebut. Lihat di CSS untuk pengaturan atribut clearfix.

Membuat desain responsif dengan elemen float

Dengan bermodalkan 3 elemen float diatas, bisa menghasilkan desain responsive.
Perhatikan demo desain responsif dibawah ini.

Halaman web umumnya terdiri dari 3 bagian, yaitu Header, Body dan Footer, maka jika diatas terdapat 3 elemen dalam satu kontainer, maka untuk memenuhi 3 bagian halaman akan dicloning menjadi 3 kontainer.

3 kontainer untuk 3 bagian halaman responsive

Kiri (left) 20%

Tengah (center) 60% ("DEMO")

Kanan (right) 20%

Kiri (left) 20%

Tengah (center) 60% ("DEMO")

Kanan (right) 20%

Kiri (left) 20%

Tengah (center) 60% ("DEMO")

Kanan (right) 20%

Lihat HTML 

Kode HTML elemen float Responsive

<div class='clearfix'>
  <div id='demo-top' class='relative clearfix'>
  <div class='kiri'>Kiri (left) 20%</div>
  <div class='tengah'>Tengah (center) 60% (<b>"DEMO"</b>)</div>
  <div class='kanan'>Kanan (right) 20%</div>
</div>

<div id='demo-mid' class='relative clearfix'>
  <div class='kiri'>Kiri (left) 20%</div>
  <div class='tengah'>Tengah (center) 60% (<b>"DEMO"</b>)</div>
  <div class='kanan'>Kanan (right) 20%</div>
</div>

<div id='demo-bot' class='relative clearfix'>
  <div class='kiri'>Kiri (left) 20%</div>
  <div class='tengah'>Tengah (center) 60% (<b>"DEMO"</b>)</div>
  <div class='kanan'>Kanan (right) 20%</div>
</div><div class='clearfix'></div>
</div>
      

Catatan :
Kode HTML diatas masih sama dengan elemen demo pertama, hanya sedikit ditambahkan atribut untuk identitas (ID) dari masing-masing elemen. Tujuannya agar proses kustomisasi dengan CSS tidak mengganggu tata letak setiap elemen.

Setelah penyesuaian

  Blog Title

Cari  

Bilah Kiri

Halaman

Bilah Kanan

space

Atribusi 2022

space

⇐ Sebelumnya

Selanjutnya ⇒