[Blog] Overflow problems in IE (sidebar appears at bottom of blog)

之前我的Blog中的side bar(也就是右邊那一整欄)在使用Internet Explorer瀏覽時(Firefox沒有問題)，有時候會發生整個sidebar跑到頁面的最下方，但有時候又不會....XD，後來不爽了去問了一下Google大神才知道，原來是因為sidebar被blog中的content所擠壓，導致sidebar在主頁面的右邊(通常放在右邊)沒有足夠的空間擺放，而跑到整個Blog的下面去，主要有下面兩項原因導致這種情形發生，以下底這段sample為例：
#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }


1. post的內容為文字時，因為沒有斷行，整行文字超過main-wrapper的width了。
2. post的內容包含圖片時，因為太大張，超過了main-wrapper可接受width。

※以上2種情形在Firefox中，會自動產生scroll bar，例如：[Blog] IE底下一片空白的UTF-8網頁...囧，而不會導致sidebar跑掉。若在Firefox中還有這樣的問題的話，那可能就是自己太智障，將sidebar-wrapper的width值設太大，導致"outer-wrapper -> width < main-wrapper ->width + sidebar-wrapper ->width"，那就是你的錯了，快改小一點吧...
．Solution：#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
....... }

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
........ }
改成上面的樣子，就行了... ^_^