Membuat Kode CSS Template 3 Column Layout dalam Website

CSS Logo Setelah beberapa bulan saya mempelajari tengtang CSS, kini saya berani menshare apa yang saya bisa dan sudah saya praktekkan dalam membuat tampilan layout 3 kolom. Kebetulan saya sedang mengelola situs web berbasis e-commerce.

Untuk lebih jelasnya, silahkan aja langsung tengok tampilannya di disini

Ini merupakan contoh kode html standar sebagai gambaran:

<html>
<head>
<title>Three Column CSS Layout</title>
<link rel="stylesheet" href="layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>Ini Bagian Atas (Header)</h2>
</div>

<div id="sidebar_left">
<h3>Sidebar Sebelah Kiri</h3>
<ul>
<li><a href="#" title="Menu">Menu 1</a></li>
<li><a href="#" title="Menu">Menu 2</a></li>
<li><a href="#" title="Menu">Menu 3</a></li>
<li><a href="#" title="Menu">Menu 4</a></li>
</ul>
</div>

<div id="center">
<h1>Judul Posting</h1>
<p>Isi paragraf dari judul</p>
<h2>Judul Posting 2</h2>
<p>Isi paragraf dari judul 2</p>
<h2>Judul Posting 3</h2>
<p>Isi paragraf dari judul 3</p>
</div>

<div id="sidebar_right">
<h3>Judul Sidebar Sebelah Kanan</h3>
<ul>
<li><a href="#" title="Menu">Menu 1</a></li>
<li><a href="#" title="Menu">Menu 2</a></li>
<li><a href="#" title="Menu">Menu 3</a></li>
<li><a href="#" title="Menu">Menu 4</a></li>
</ul>
</div>

<div id="footer">
<h4>Bagian Bawah (footer)</h4>
</div>

</div>
</body>
</html>

Coba pada file html diatas, terdapat 6 buah id, yaitu container, header, sidebar_left, center, sidebar_right dan footer. Setelah itu kita buat kode CSS-nya, sebagai berikut:

body {
font-family: Verdana;
margin: 0;
padding: 0;
}

#container {
width: 900px;
margin: auto;
border: 1px solid #000;
background: #000000;
}

#header {
height: 100px;
border: 1px solid #000;
background: #FF0000;
}

#sidebar_left {
float: left;
width: 170px;
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
background: #00FF00;
}

#center {
float: left;
width: 500px;
margin: 10px;
padding: 10px;
border: 1px solid #000;
background: #3300FF;
}

#sidebar_right {
float: left;
width: 170px;
margin: 10px 0;
padding: 10px;
border: 1px solid #000;
background: #00FF00;
}

#footer {
height: 40px;
border: 1px solid #000;
clear: both;
background: #FF0000;
}

Sampai disini dulu, tunggu tutorial berikutnya. Contoh hasil seperti ini:
3 column css layout


Baimana?? anda sudah mencobanya??