接续上一篇提到外层排版的写法，现在就来说明主内容区五个区块的写法。

主内容区

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;
}

[下载范例]