Tạo bố cục cột (Column Layout) với CSS

Để tạo bố cục cột:

Đặt margin và padding cho toàn bộ tài liệu:

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

Định nghĩa cột với màu vàng, sau gán cho <div>:

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

Định nghĩa div bên trong level0:

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

Lồng thêm div, code hoàn chỉnh:

<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">
            Nội dung chính ở đây...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>