Float dalam CSS – PT Proweb Indonesia

Float dalam CSS biasa digunakan untuk membuat layout. Dengan menggunakan layout kita meletakkan sisi demi sisi. Dalam contoh ini kita akan menggunakan float:left yang banyak digunakan untuk membuat layout website yang standard.

Perhatikan coding pada #kiri dan #tengah berikut ini:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<style type=”text/css”>
body
{
      margin: 0px;
      padding: 0px;
}
#header
{
      width:743px;
      margin-left: 5px;
      background-color: #e3e191;
      border: 1px #a0b1a0 solid;
      padding: 5px;
}

#kiri
{
      float: left;
      width: 200px;
      padding: 9px;
      margin-left: 5px;
      margin-top: 5px;
      margin-right: 5px;
      background-color:#b3fd9d;
      border: 1px #a0b1a0 solid;
}
#tengah
{
      float: left;
      width: 500px;
      padding: 9px;
      border: 1px #a0b1a0 solid;
      margin-top: 5px;
      margin-left: 10px;
      background-color:#8ad3ec;
      margin-bottom: 5px;

}
#footer
{
      clear: left;
      width:743px;
      margin-left: 5px;
      background-color: #ffceff;
      border: 1px #a0b1a0 solid;
      padding: 5px;
}

</style>
<title>Float Kiri</title>
</head>
<body>
<div id=”header”>Menu 1| Menu 2 | Menu 3 | Menu 4 | Menu 5 </div>
<div id=”kiri”>Artikel lain:
      <br/>Lagu 1
      <br/>Lagu 2
      <br/>Lagu 3
</div>
<div id=”tengah”><strong>Lagu1</strong>
      <p>Spanjang jalan Tuhan pimpin itu cukup bagiku.
      RahmatNya selalu serta dan melindungi aku.
      Penghiburan dari surga jika Tuhan sertaku.
      Karena semua tentunya diperbuatNya baik itu.
      Karena semua tentunya diperbuatNya baik itu.
      </p>
      <p>Spanjang jalan Tuhan pimpin meski jalanku tak snang.
      DibriNya rahmat dalam ujian, roti hidup tak kurang
      Meski ku merasa haus penat dan jiwa menanggung berat.
      Dari batu air memancar terbitlah kegirangan.
      Dari batu air memancar terbitlah kegirangan.
      </p>
</div>
<div id=”footer”>Development by PT Proweb Indonesia</div>
</body>
</html>

Hasilnya bisa dilihat pada http://aris.proweb.asia/float_kiri.html dengan gambar seperti di bawah ini.

Perhatikan bahwa margin-right untuk #kiri bertemu dengan margin-left untuk #tengah dan hasilnya adalah 5px+10px=15 px. Di sini tidak terjadi margin-collapsing karena elemen yang mengalami float aturan margin collapsing tidak berlaku.

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Float dalam CSS