兩行式 CSS 固定寬度 side bar

這是一個簡單的筆記，簡述兩行式版面，右邊 side bar 固定寬度，左邊主要欄位浮動寬度的作法。

我個人不喜歡在 blog 使用那種限定像素寬度的版面，因為每個人選擇螢幕和視窗大小的自由。
一個原則是資料類型的網頁（如 blog 或者資料查詢)，比較類似設計應用程式介面的思維，所以使用可調整寬度的設計會比較好，想想，如果你的 word 固定 800x600大小，會不會很難用？在 1600x1200 的螢幕下面，會不會很小？
所以說，用那種 70%:30% 或者 80%/20% 比較好了嗎？也不會，因為 side bar 的常常放一些小元件和圖片，這些都是固定寬度的，如果照比例放大縮小，對於有些螢幕太大的人，或者習慣用小視窗瀏覽的人，可能會造成 sidebar 太大太小的問題。
所以理想的版型應該是 side bar 固定寬度，主欄位變動寬度。那這樣怎麼弄呢？以 blogger 為例，原來通常是在 #content-wrapper 裡面包含一個 #sidebar-wrapper 和 #main-wrapper。如果我們要讓 #sidebar-wrapper 固定寬度，我們可以這樣改，先增加一個 #main-wrapper2 這個 style，這個將要放到 #main-wrapper 裡面。接下來的原理是，我們要讓 #main-wrapper 向左對齊佔據全部的空間，然後 #sidebar 也向左對齊，不過重點是我們把 sidebar 向左對齊的邊緣設成負的，這樣原本會緊鄰在 main 右邊的 sidebar，會往左移，只要把寬度調整好， sidebar 就會和 main-wrapper 重疊。
但是這樣，因為重疊的原因，我們不能直接把文章放進 #main-wrapper，這樣文章會有一部分被遮住，這也就是我們為什麼要 #main-wrapper2 的原因，我們把他放入 #mainwrapper 中，並且調整右邊界 ，讓他不會和 sidebar 重疊，這樣就行了。
了解原理之後就比較容易自己修改了。
一個示範的 css 2.0 代碼如下：

#content-wrapper {
width: 90%;
}
#main-wrapper {
margin-left: 14px;
width: 100%;
float: left;
}
#main-wrapper2 {
margin-right: 310px;
}
#sidebar-wrapper {
width: 280px;
margin-left: -294px;
float: left;
}

這個代碼我只留下關鍵的部份，顏色等等其他的部份，保留原來的設定即可。 310 > 294 >280 是因為我要留下一些空白，這三個數字是相關的。content-wrapper 的寬度 90% 是看你兩邊的留白而定。#main-wrapper2 的樣式設定基本上可以 copy #main-wrapper，因為他其實是真正的 #main-wrapper。
最後，要修改一點 html 把 #main-wrapper2 放進 #main-wrapper。在不打開小裝置的情形下，其實大致上是如同下面的 html code

<div id="main-wrapper">$lt;div id="main-wrapper2">
<b:section class="main" id='main "showaddelement="'no"'>
<b:widget id="'Blog1'" locked="'true'" title="'blog" type="Blog" />
</b:section>
</div></div>

也就是原先包一層，現在變成包兩層了。這樣就能達到理想的效果。