全力以赴每一天

HTML 原始碼：

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#divpage {
width: 800px;
margin-right: auto;
margin-left: auto;
}

#divtop {
background-color: #3399FF;
height: 150px;
}

#divbox {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
}

#divleft {
background-color: #99CC33;
width: 230px;
left: 10px;
position: absolute;
}

#divright {
background-color: #CCCC33;
width: 540px;
margin-left: 250px;
}

#divfooter {
background-color: #FF9999;
height: 50px;
}

<div id="divpage">
<div id="divtop"></div>
<div id="divbox">
<div id="divleft"></div>
<div id="divright"></div>
</div>
<div id="divfooter"></div>
</div>

1.先用 divpage 整個包起來，置中對齊。
2.放置 divtop，最上面的區塊。
3.做一個放在 divtop 下面的 divbox，
   做為 divleft 和 divright 的父box，
   並將 divleft 和 divright 放在 divbox 裡面，
   縮放時就會以 divbox 為基準點，
   讓 divleft 和 divright 同時跟 divtop 保持一定距離。
4.divleft 和 divright 採用「絕對+預設」的配置方式，
   divleft 定位為絕對，divright 則定位為預設，並加上邊界設定。
5.divfooter 加在 divbox 下面，因為 divright 使用預設定位，
   所以 divfooter 就不會跑到 divleft 和 divright 的下面去了，
6.但因為 divleft 的定位是絕對，所以 divfooter 不會因為 divleft 的大小改變，
   而相對的改變，因此做這種搭配時，單邊區塊大小要大於絕對配置的區塊。

範例網頁