要用CSS製造一個sidebar靠在右邊，不是什麼困難的事，而且方法很多，這裡的右邊的sidebar就是用CSS弄出來的，不過雖然方法很多，卻因為我的一些小龜毛，加上IE的bug，害我花了不少時間才弄到滿意。
首先要解釋一下何謂我的龜毛。分為兩點，一是我希望HTML原始碼中，sidebar的資訊在主要內容之後，這樣不支援CSS的瀏覽器就可以不必理會sidebar而可以先看到主要內容。二是我不希望對主要內容的位置或是float做設定，也就是保持預設的狀態，因為怕對CSS支援不完整或不正確的瀏覽器會把主要內容搞不見。這兩點其實單獨存在都還好，不過一起出現就殺掉了許多種可以用的方法，例如把sidebar內容放在主要內容前，然後讓sidebar的float屬性是right，這樣就可以做出靠右的sidebar，而且後面要提的IE的bug也不會出現。
一開始我是參考stopdesign的做法，把sidebar的position設成absolute，top和right設成0，本來一切OK的，直到用IE看了之後，發現到sidebar最右邊多了1px的空隙，這是不正確的，應該是IE的bug。我做了很多試驗後，發現問題在「right: 0;」上，如果是靠左「left: 0;」的話不會有這問題，又如果是用float來讓它靠右也不會有這問題，不過因為上面提過的原因，所以我不打算用float來處理，而且IE處理float似乎有問題，雖然我還不清楚是怎樣的bug。
為了處理這個問題，我測試了好久，最後終於成功了，不過不是真正的靠右，而是讓margin-left和width的值加起來是100%，當然margin-right和padding都是0，這種做法有個缺點是只能用百分比值來設定sidebar的寬度，其他像是em,px等等都不能用了，就算用了也只能對一種解析度做到真的是靠右的sidebar。下面是我的sidebar部分的css
#sidebar
{
position: absolute;
top: 3em;
width: 32%;
margin-left: 68%;
padding: 0.5em 0;
background-color: #933;
}position: absolute;還是必要的，top: 3em是爲了保留最上面banner的空間，其實也可以設成0，然後用一個position: relative;的div標籤包起來，不過因為我不想要那麼多層div，就用現在這種方法了。在來就是主角，width和margin-left加起來剛好是100%。padding這樣設定是表示上下0.5em，左右0的意思，最後一行就是背景色了。再來是主要內容部份的css。
#content
{
margin-right: 32%;
padding: 0.5em;
}要說明的只有第一行，margin-right: 32%;，這是爲了保留sidebar的空間，因為我的sidebar不是用float指派，所以必須要幫它保留好空間，不然會造成重疊的狀況，而這裡的margin-right的值和sidebar的width的一樣，當然也可以自己做調整，故意造成重疊的狀況，或是留些空白。
補充：發表完這篇過沒多久，我就在mezzoblue看到他最新的文章Friday Challenge，剛好就是討論同樣的問題，後面也有人提供了很有趣的處理方法，不過迴響部分我還沒看完。