body {
margin: 0 auto;
padding: 0px;
background-color:#F5F5F5;
font-family: Tahoma, Verdana, sans-serif;
font-size: 0.8em;
color: #000000;
}
/*เพิ่มรายละเอียดให้กับ h1-h6*/
h1 {
margin: 0;
padding: 0;
}
#header {
position: relative;
float: none;
width: 800px;
height: 100px;
margin: 0 auto;
background-color: #cccccc;
}
#wrapper {
width: 800px;
position: relative;
float: none;
margin: 0 auto;
background-color: #FFFFFF;
display: table;
}
#wrapper .content-left {
width:200px;
position: relative;
float: left;
margin: 0;
padding: 0;
background: #000000;
color: #FFFFFF;
height: 200px;
}
#wrapper .content-right {
width:600px;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#footer {
position: relative;
float: none;
width: 800px;
height: 80px;
margin: 0 auto;
background-color: #FF9900;
color: #FFFFFF;
}
ซึ่งโค้ด xhtml จะเขียนออกมาได้ในลักษณะนี้
<body>
<div id="header">
<h1>ส่วนของ header</h1>
</div>
<div id="wrapper">
<div class="content-left">
<h5>คอลัมน์ฝั่งซ้าย</h5>
</div>
<div class="content-right">
<h5>คอลัมน์ฝั่งขวา</h5>
</div>
</div>
<div id="footer">
<h1>ส่วนของ footer</h1>
</div>
</body>