Page Layout ด้วย CSS

โค้ด HTML แบ่งแนวนอนออกเป็น 4 ส่วนคือ header menu middle และ footer ส่วนพื้นที่แสดงผล middle จะประกอบด้วย 2 column คือ leftmodule และ rightmodule

<div id="header">header</div>

<div id="menu">menu</div>

<div id="middle">

  <div id="leftmodule">leftmodule</div>

  <div id="rightmodule">rightmodule</div>

</div>

<div id="footer">footer</div>

โค้ด CSS ครับจาก ตัวอย่าง ผมจะแยกสีออก เพื่อให้เห็นความแตกต่างได้ดีขึ้น

#header {

  text-align:center;

}

#menu{

  text-align:center;

}

#middle {

  height:300px;

  overflow:hidden;

}

#leftmodule {

  width:150px;

  height:100%;

  float:left;

  padding:5px;

}

#rightmodule {

  height:100%;

  float:none;

}

#footer {

  text-align:center;

}

ในส่วนของ leftmodule ต้องกำหนดความกว้าง (width) ให้กับ div เพื่อให้ rightmodule ขึ้นมาระดับเดียวกันกับ rightmodule และต้องกำหนด float ให้กับทั้ง 2 ส่วนด้วย

ดูโค้ดเพิ่มเติมได้ที่ ตัวอย่าง