Penggunaan Div dan Float

Di dalam menggunakan File CSS, kita sering menggunakan pengelompokan suatu area, misalnya group header, article, footer, selain menggunakan tag-tag standar HTML 5 untuk melakukan pengelompokan diperlukan tag DIV,

Penggunaan Div dan float

tag DIV

  • tag div digunakan untuk melakukan pengelompokan suatu area
  • Seperti kita ketahui sebelumnya saat membuat suatu halaman web kita memiliki 3 area yaitu header, article dan footer,
  • ketiga tag diatas adalah tag standard HTML 5, pada HTML 4 tag tersebut tidak ada maka biasanya pada HTML sebelumnya untuk mengelompokkan suatu area web menggunakan div seperti contoh berikut
    <div class="header">
      <h1>Nicola Tesla</h1>
    </div>
    <div class="article">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, sapiente!</p>
    </div>
    <div class="footer">
        ...
    </div>

Penggunaan Float dan clear

  • float digunakan agar area berikutnya yang akan diletakkan disamping objek yang ada saat ini, bisa diletakkan di samping kiri / kanan
  • pilihan perataan pada perintah float adalah left, right, none
  • default pilihan float adalah none.
  • secara default float nilainya adalah none, yang artinya bila kita menempatkan objek selalu diletakkan dibawah dari objek yang ada saat ini.
  • berikut contoh penggunaannya
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dokument 2</title>
  <link rel="stylesheet" href="style2.css">
</head>
<body>

  <div class="group-satu">
    <div class="kotak-merah">1</div>
    <div class="kotak-hijau">2</div>
    <div class="kotak-ungu">3</div>
  </div>
  <div class="group-dua">
    <div class="kotak-biru"><h1>4</h1></div>
    <div class="kotak-kuning">5 
      <h1>Judul</h1>
      <div class="kotak-coklat">
        6
      </div>
    </div>
  </div>
</body>
</html>
  • berikut adalah file style2.css yang akan digunakan html diatas
* {
  margin: 0;
  padding: 0;  
}

.group-satu div {  
    float:left;
}
.group-dua div {  
    clear: left;
}
.kotak-merah {
  height: 100px;
  width: 100px;
  background-color: #F00;
}

.kotak-hijau {
  height: 150px;
  width: 150px;
  background-color: #0F0;
}
.kotak-ungu {
  height: 100px;
  width: 100px;
  background-color: #F0F;
  clear: left;
}
.kotak-biru {
  height: 200px;
  width: 200px;
  background-color: #00F;
}
.kotak-kuning {
  height: 200px;
  width: 200px;
  background-color: #FF0;
  margin: 20px;
  border-style: solid;
  border-width: 30px;
  border-color: #f00;
  padding-top: 50px;
}
.kotak-kuning h1 {
  font-family: sans-serif;
  font-size: 50px;
  text-align: center;
  color: brown;
  background-color: black;
}
.kotak-coklat {
  height: 50px;
  width: 50px;
  background-color: brown;
  margin-left: auto;
  margin-right: auto;
}
  • kalau anda perhatikan pada css di dalam group-satu terdapat perintah float: left yang artinya kotak-kotak yang ada di salamnya akan diletakkan merapat ke kiri, jadi kotak hijau akan berapa di sebelah dari kotak merah.
  • akan tetapi apabila kotak ungu tidak ingin diletakkan di samping tetapi dibawah, maka di dalam kotak-ungu harus ditulis clear: left;
  • untuk menengahkan suatu tulisan dapat menggunakan tag text-align: center,
  • sedangkan apabila kita sudah berada di dalam objek tersebut dan ingin menjadikan posisi tengah maka digunakan tag berikut
  margin-left: auto;
  margin-right: auto;

Praktek siswa

  • buka kembali file index.html dan style.css
hgroup {
    float: left;
}

article {
    clear: left;
}

nav {
    height: 2em;
    text-align: right;
    padding-top: 1em;
}

header li {
    margin: 0 0.5em 0 0.5em;
}


footer li {
    margin: 0 0.5em 0 0.5em;
}