GORAGOD.com

โค้ด 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 ส่วนด้วย

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