Membuat Layout Web 3 Kolom dengan CSS13:49 Wilianto Indrawan 9 comments Udah lama neh gak buat artikel di blog ini. Abis lagi sibuk ama ulangan tengah semester dan produk ebookku. Tapi akhirnya sempet juga untuk buat neh artikel. Artikel kali ini berhubungan ama CSS, yaitu membuat layout web 3 kolom. Mungkin dah banyak para blogger yang udah tau caranya, tapi gpplah saya post aja, daripada gak ada update untuk ini blog. Awalnya saya dapet pertanyaan ini dari salah satu pengunjung blog ini di artikel ini. Tapi saya belum tau jawabannya jadi harus melakukan "eksperimen" dulu deh dengan kode-kode. Setelah selesai bereksperimen, akhirnya saya dapet kode-kode berikut ini.

Pertama adalah kode untuk file index.html, berikut adalah source kodenya. Coba Buat LayOut Web 3 Kolom Ini Bagian Header Menu Kiri

Menu

Menu

Menu

Menu

Judulnya bro 1 Paragrafnya monggo diisi Judulnya bro 2 Paragrafnya monggo diisi Judulnya bro 3 Paragrafnya monggo diisi

1 2 3 4

Menu Kanan

Menu

Menu

Menu

Menu

Ini Footernya

1 2 3 4

Pada file di atas kita mempunyai 6 buah id, yaitu container, header, kiri, tengah, kanan dan footer. Berikutnya kita akan membuat file yang berisi properti dari tiap-tiap id. Berikut adalah source kode untuk propertinya. body { font-family: Verdana; margin: 0; padding: 0; } #container { width: 900px; margin: auto; border: 1px solid #000; background: #000000; } #header { height: 100px; border: 1px solid #000; background: #FF0000; } #kiri { float: left; width: 170px; margin: 10px 0; padding: 10px;

border: 1px solid #000; background: #00FF00; } #tengah { float: left; width: 500px; margin: 10px; padding: 10px; border: 1px solid #000; background: #3300FF; } #kanan { float: left; width: 170px; margin: 10px 0; padding: 10px; border: 1px solid #000; background: #00FF00; } #footer { height: 40px; border: 1px solid #000; clear: both; background: #FF0000; } Simpan dengan nama layout.css di dalam folder yang sama dengan file layout.html. Coba lihat hasilnya dari browser maka akan sama nampak seperti gambar berikut.

PENJELASAN SCRIPT Karena kita menginginkan 3 buah kolom berurut menjadi satu, maka kita bisa mengisikan floatnya dengan left. Jadi secara otomatis kolom akan terbuat secara berurutan dengan ukuran yang sudah anda tentukan.

Anda bisa mengedit nilai/lebar dari kolomnya sesuai dengan keinginan anda, namun ingat jika seluruh lebar kolom dijumlahkan dengan margin dan padding maka jumlahnya harus 900px atau kurang. Jangan melebihi 900px karena kita menset nilai id containernya dengan 900px, kalau melebihi maka kolom akan pindah atau turun ke bagian bawah kolom lainnya. Oke selamat mencoba... Jangan lupa komentarnya yah...