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

  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.
  • 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.
  • 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.

Kiriman terbaru