สร้าง Column Layout ด้วย CSS

เพื่อสร้าง column layout:

ตั้งค่า margin และ padding ของเอกสารทั้งหมดดังนี้:

<style>    <!--       body {          margin:9px 9px 0 9px;          padding:0;          background:#FFF;       }     --> </style>

กำหนดคอลัมน์สีเหลือง และภายหลังเราจะผูกกฎนี้กับ <div>:

<style>   <!--      #level0 {          background:#FC0;      }    --> </style>

ตอนนี้กำหนด division อีกชั้นภายใน level0:

<style>    <!--       #level1 {          margin-left:143px;          padding-left:9px;          background:#FFF;       }    --> </style>

ซ้อน division อีกชั้น และโค้ดสมบูรณ์จะเป็นดังนี้:

<style>      body {       margin:9px 9px 0 9px;       padding:0;       background:#FFF;    }    #level0 {background:#FC0;}    #level1 {       margin-left:143px;       padding-left:9px;       background:#FFF;    }    #level2 {background:#FFF3AC;}    #level3 {       margin-right:143px;       padding-right:9px;       background:#FFF;    }    #main {background:#CCC;} </style>   <body>      <div id="level0">       <div id="level1">          <div id="level2">             <div id="level3">                <div id="main">                    เนื้อหาสุดท้ายไปที่นี่...                </div>             </div>          </div>       </div>    </div> </body>.