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 :

membuat layout 3 kolom

Semoga bermanfaat

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Membuat halaman web dengan latar background bintang dengan css
    Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.
  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.

Kiriman terbaru