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

  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • 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.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
  • Cara membuat dan menyisipkan CSS
    Panduan Cara membuat dan menyisipkan CSS pada halaman web
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..

Kiriman terbaru