Penggunaan CSS dalam Layout Website

Dari judulnya, di sini akan dibahas tentang bagaimana penggunaan CSS dalam layout (tata letak) website secara simpel. Langkah awal buat sketsa layout website yang ingin digunakan. Misalnya seperti ini:

Beri sekalian nama dari setiap section nya :

Buat CSS section untuk container, container merupakan section terbesar dari sebuah layout yang berfungsi sebagai penampung section-section yang lebih kecil.

#container{ ... }

Karena section header ada didalam container, maka CSS seperti ini:

#container #header{ ... }

Buat box-kiri-atas

#container #box-kiri-atas{ ... }

Buat box-kiri-bawah

#container #box-kiri-bawah{ ... }

Buat box-pusat

#container #box-pusat{ ... }

Karena box-profil ada didalam box-pusat, dan box-pusat ada di dalam container:

#container #box-pusat #box-profil{ ... }

Buat footer

#container #footer{ ... }

Hal-hal dasar agar bisa buat layout seperti itu hanya memakai property Width, Height, margin-left, margin-rigth, margin-top, margin-bottom. Kemudian mungkin muncul pertanyaan, cara buat -kok bisa- box-kiri-atas dan box-kiri-bawah ada dikiri, tapi box-pusat dikanan, nah itu ada property float, maka pada CSS menggunakan float:right atau float:left. Float kan artinya melayang/mengapung, jadi bisa diartikan section yang diberi property float akan mengapung di atas section lain. Implementasi pada HTML:

<div id="container">
<div id="header"></div>
<div id="box-kiri-atas"></div>
<div id="box-kiri-bawah"></div>
<div id="box-pusat">
<div id="box-profil"></div>
</div>
</div>

Perlu diingat!

1. Ukuran section2 di dalam container harus seimbang dengan ukuran container, misal:
   Lebar (width) containernya 900px. Maka, ukuran box-kiri-atas 200px (dengan margin-left:10px dan margin-right:10px). Box-pusat ukurannya jadi 670px (dengan margin-left:0px dan margin-right:10px;)
   Maka penghitungannya 200px + 10px + 10px + 670px + 0px + 10px = 900px
   

Semoga bermanfaat! CMIIW :)