Membuat tampilan layout 3 kolom dengan css
Pada artikel singkat berikut ini saya akan menjelaskan bagaiman cara membuat tampilan halaman web dengan susunan tiga kolom. Contoh yang saya buat sengaja dirancang sederhana agar dapat digunakan untuk berbagai keperluan. Lihat kode berikut ini :
CSS Untuk layout 3 kolom
<style type="text/css">
#halaman { width:980px; margin:0 auto; }
#header { height:100px; padding:10px;background-color:#CCCCCC; }
#kiri { height:100px; padding:10px;background-color:#CCCCCC;float:left;width:250px; margin-top:10px; }
#kanan { height:100px; padding:10px;background-color:#CCCCCC;float:right;width:250px; margin-top:10px; }
#tengah { height:100px; padding:10px;background-color:#CCCCCC;margin:10px 290px 0 290px; }
#footer { clear:both; height:50px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
</style>
Jika anda lihat saya buat beberapa elemen css sesuai dengan bagian-bagian tampilanya. Halaman adalah bagian rangka utama tampilanya, nilai lebarnya bisa anda sesuaikan dengan kebutuhan lebar layar penggunanya, kemudian diposisikan tengah dengan mengatur marginnya 0 auto. Kemudian untuk kolom kiri dan kanan diletakkan mengembang pada masing-masing sisi dengan lebar 250px (ini bisa disesuaikan). Bagian tengah ini dibuat fleksibel sehingg jika ranga utama diubah maka juga akan ikut melebar. Yang terakhir bagian footer, ini bagian penutup area bawah. karena sebelumnya menggunakan float left dan right maka pada footer harus dinetralkan dengan clear:both.
Kode html untuk layout 3 kolom
<div id="halaman"> <div id="header">HEADER</div> <div id="kiri">KIRI</div> <div id="kanan">KANAN</div> <div id="tengah">TENGAH</div> <div id="footer">FOOTER</div> </div>
Saya juga tulis sederhana saja dengan membuat beberapa elemen sesuai dengan css yang diatas sudah dibuat.
Semuanya bisa ditulis lengkap seperti berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 kolom dengan css</title>
<style type="text/css">
#halaman { width:980px; margin:0 auto; }
#header { height:100px; padding:10px;background-color:#CCCCCC; }
#kiri { height:100px; padding:10px;background-color:#CCCCCC;float:left;width:250px; margin-top:10px; }
#kanan { height:100px; padding:10px;background-color:#CCCCCC;float:right;width:250px; margin-top:10px; }
#tengah { height:100px; padding:10px;background-color:#CCCCCC;margin:10px 290px 0 290px; }
#footer { clear:both; height:50px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
</style>
</head>
<body>
<div id="halaman">
<div id="header">HEADER</div>
<div id="kiri">KIRI</div>
<div id="kanan">KANAN</div>
<div id="tengah">TENGAH</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
dan hasilnya jika ditampilkan kurang-lebih seperti gambar berikut :
Semoga bermanfaat
Zainal Hakim
Baca juga :
** Bebas disunting dengan menyebutkan sumber **
