接續上一篇提到外層排版的寫法，現在就來說明主內容區五個區塊的寫法。

主內容區

HTML的結構：

<div id="wrapper">
    <header id="header">這是header</div>
       <section id="main">
         //第二層：包覆主內容區
          <div id="main-inner">

              //第三層：主內容區, 一共劃出五個區塊    
              <div class="overview-inner">
                  <section class="Lpanel overview-box">BOX 1</section>
                  <section class="Lpanel overview-box">BOX 2</section>
                  <section class="Lpanel overview-box">BOX 3</section>
                  <section class="Lpanel overview-box">BOX 4</section>
                  <section class="Lpanel overview-box">BOX 5</section>
              </div>

        </div>
    </section>
</div>

CSS的寫法：

#main-inner {
    height: 100%;
    padding-top: 5px;
    padding-left: 5px;
    background-color: #FF9600;
}

.overview-inner {
    height: 100%;
     background-color: #FFF500;
}

.Lpanel { width: 33.0%; } //BOX 1~4的寬度

.Rpanel { width: 66.3%; } //BOX 5的寬度

.Lpanel, .Rpanel {
    height: 49.25%; //這個數字並不是絕對值，是多次微調之後得到的數字
    display: inline-block; //用inline-block的缺點是會有預設的間距，可用margin=0 將間距消失，但在這裡本來就需要間距所以不設margin=0
}

.overview-box {
    border: 1px solid #c0c0c0;
    padding: 5px;
    background: #f0f0f0;
}

[下載範例]