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>