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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 :

membuat layout 3 kolom

Semoga bermanfaat

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Kenapa menggunakan css (Cascading Style Sheets)
    CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form

Kiriman terbaru