Ketik Scriptnya sbb :
<html>
<!-- Bagian Kepala (terdiri dari judul halaman dan link ke file css -->
<head>
<title>Membuat Layout Website Dengan CSS</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!-- Bagian Isi -->
<body>
<div id="wrapper">
<div id="header">
<h1>#header</h1>
<p>Ini adalah bagian HEADER. Biasanya terdapat LOGO, MENU, dan sebagainya.</p>
</div>
<div id="body">
<h1>#body</h1>
<p>Ini adalah bagian BODY yang merupakan bagian inti dari website.</p></div>
<div id="sidebar">
<h1>#sidebar</h1>
<p>Ini adalah bagian SIDEBAR. Biasanya terdapat MENU, DAFTAR KONTEN, dan sebagainya.</p>
</div>
<div id="footer">
<h1>#footer</h1>
<p>Ini adalah bagian FOOTER. Biasanya terdapat HAK CIPTA, MENU, dan sebagainya.</p>
</div>
</div>
</body>
</html>
Selanjutnya anda buat file CSS nya sbb :
#wrapper {
width:900px;
margin:0 auto;
}
#header {
float:left;
width: 100%;
height:150px;
background-color:red;
}
#body {
float:right;
width:80%;
height:300px;
background-color:blue;
}
#sidebar {
float:left;
width: 20%;
height:300px;
background-color:green;
}
#footer {
float:left;
width: 100%;
height: 100px;
background-color: yellow;
}
Maka hasilnya akan terlihat seperti berikut :
