Super Simple 2 Column Layout Website

Cipeget.com
23:27 WIB
Super Simple 2 Column Layout Website
2 Column Layout

Membuat 2 kolom layout website sangat mudah lihat code di bawah, anda bisa mencobanya copas di text editor seperti notepad++ :

<!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>
	<style>
	   * {
        	margin: 0;
        	padding: 0;
        }
        
        body {
        	font-size: 62.5%;
        	font-family: Garamond, sans-serif;
        	background: url(images/content-bg.png) left repeat-y #FFFADA;
        }
        
        h1 { font-size: 4.0em; }
        p, li { font-size: 1.8em; }
        
        .clear { clear: both; }
        
        #header {
        	background: #e3da9d;
        	padding: 15px 0 15px 15px;
        }
        
        #content {
        	padding: 15px 30px 0 0;
        	}
        	#main-content {
        		margin-left: 175px;
        		max-width: 600px;
        	}
        
        #sidebar {
        	width: 145px;
        	float: left;
        	padding: 0 0 0 15px;
        	}
        	#sidebar ul {
        		list-style: inside;
        	}
	</style>
</head>
<body>
	<div id="header">
		<h1>Super Simple Two Column Layout</h1>
	</div>
	<div id="content">
		<div id="sidebar">
			<ul>
				<li>Sidebar stuff.</li>
				<li>Sidebar stuff.</li>
				<li>Sidebar stuff.</li>
			</ul>
		</div>
		<div id="main-content">
			<p>isi content.</p>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>

Selamat mencoba.