Page Layout แบบ footer ติดอยู่ข้างล่างตลอด
ส่วนสำคัญคือการกำหนด CSS ครับ สามารถดูโค้ดทั้งหมดได้ที่ ตัวอย่าง เลยครับ
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background-color:white;
font-size:8pt;
font-family:Tahoma, "MS Sans Serif";
color:black;
}
div#container { /* พื้นที่ทั้งหมดของ browser */
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background:white;
background:url("../images/f_bkg.jpg"); /* พื้นหลังของเว็บไซต์ */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header { /* ส่วนหัวสำหรับใส่ logo */
background:url("../images/logo_bkg.gif"); /* พื้นหลังของ logo */
}
div#footer { /* ส่วนด้านล่าง */
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
text-align:center;
background:url("../images/bottom.gif"); /* พื้นหลังของ footer */
}
div#content { /* ส่วนเนื้อหาของเว็บ */
padding:10px;
}
</style>