Membuat Template HTML Sederhana dua Kolom

Kali ini saya akan memposting tentang coding, tapi yang simpel-simpel aja dulu
heheh
nunggu mata ini ngantuk. Pada Tutorial kali ini saya akan men-share bagaimana memadukan CSS dengan HTML untuk membuat sebuah website yang dinamis.
Disini saya akan buat sebuah template web dengan dua kolom. Dimana Kolom kiri adalah menu yang nanti nya bisa anda modifikasi sendiri. dan bagian kolom kanan merupaka content atau isi.

Ini sangat cocok bagi anda pemula di bagian web desain atau developer web. Dimana syarat utamanya adalah HTML dan CSS.

Ini merupakan Contoh template Web dua kolom juga sederhana :)

Ok baiklah, saya akan langsung kasih Source nya saja. silahkan edit, tambahin, hapus sediri ya.. hehehe

<!DOCTYPE html>
<html>
<style>
#container{
width:90%;
padding:0% 5% 0% 5%;
}
#header{
background-color:#FFA500;
}
#menu-atas{
background-color:#000;
padding:5px 5px 5px 5px;
color:#FFF;
}
#menu-kiri{
background-color:#FFD700;
width:20%;
float:left;
}
.judul-menu-kiri{
background-color:green;
border-radius:10px;
padding:5px 5px 5px 5px;
}
.isi-menu-kiri{
padding:5px 5px 5px 5px;
}
#isi{
padding:5px 5px 5px 5px;
width:100%;
height:100%;
}
.judul-isi{
background-color:#009999;
border-radius:10px;
}
.ket-isi{
background-color:green;

}
#footer{
background-color:#FFA500;
clear:both;
text-align:center;
}

</style>
<body>

<div id="container">

<div id="header" >
<img src="robtz.png"></img>

</div>
<div id="menu-atas">
Home :: Kontak :: Profile
</div>
<div id="menu-kiri">
<div class="judul-menu-kiri">
Navigasi</div>
<div class="isi-menu-kiri">
Home<br>
Kontak<br>
Profile</div>

<div class="judul-menu-kiri">
Kategori</div>
<div class="isi-menu-kiri">
HTML<br>
CSS<br>
JavaScript</div>

</div>
<div id="isi" >
<div class="judul-isi">
Ini Judul
</div>
di sini isi nya

<div class="ket-isi">Posted by : ho1onk - Komentar : 8
</div>
</div>
<div id="footer" style="">
Copyright © ho1onk.blogspot.com</div>

</div>

</body>
</html>