The Reqested Two Columns.

因為被要求了所以寫一下 Two Columns 的作法，因為是很簡單的東西所以就單刀直入罷 lol 。

HTML

<div id="header">Header Information</div>
<div id="container">
 <div id="main">Main Content</div>
 <div id="sidebar">Sidebar (Either Right or Left)</div>
</div>
<div id="footer">Footer Information</div>

這也是一般 weblog 的結構。

Layout

因為是本人的要求，所以就直接用ロイ同學現在的 layout 來參考罷。

<div id="header">...</div>
<table width="100%">
 <tr>
  <td width="68%" style="vertical-align: top;">Main Content</td>
  <td style="vertical-align: top;">Sidebar</td>
 </tr>
</table>

這樣會變成 Header 在上面，下面有個比例 2:1 (68% : 32%) 的 Two Columns layout 。這裡他用了一個 Table 來做，不論做法的好壞，我們來看 CSS 如何做到這樣的效果。

The Simplest

最簡單也是最普遍的做法是用 float 來解決。

#main {
 float: left;
 width: 68%;
}
#sidebar {
 float: right;
 width: 31%;
}
#footer {
 clear: both;
}

也許你會發現 #sidebar 跟 #main 合起來並不等於 100% ，這樣是防止 browser 在計算時的微誤令 #sidebar 不夠空位向右 right 而被擠到下面。

接下來只要把再把做好的分隔線圖片當成 background 放上去就成了。

#container {
 background: white url(./your-separator-image.png) repeat-y 68% top;
}

其他細部就自己來罷。

追伸。這樣能算是 CSS 的特別應用嗎...？