Blogger新版編輯器造成的邊欄往下掉，如何解決?

最近陸續有好幾個網友跟我反應，他們換模版之後會有邊欄(Sidebar)往下掉的情形，不論使用IE或是Firefox瀏覽器都會這樣，這種邊欄往下掉的狀況通常在以前是因為文章裡的圖片超過主文的寬度，但是最近這幾件我套用他們的模板後，並非這原因可解釋，今天經我利用網友的文章一篇一篇的測試過後，終於得到結論，就是"新版編輯器"惹的禍。



(正常配置情況的圖片)

這種邊欄(Sidbar)往下掉的情形通常會有三個原因，
1、圖片大小(img width)超過文章內容區(main-wrapper)設定的寬度。
2、邊欄元件的寬度超過sidebar所定義的寬度(sidebar-wrapper)時，
3、main-wrapper+sidebar-wrapper寬度大於content-wrapper寬度，


通常content-wrapper=(包含)main-wrapper+sidebar-wrapper
這有時並非只有
550+450>990的問題，兩者合併寬度大於整個寬度，當然往下掉。
有時你設550+450<1020，也會出現邊欄往下掉的情形，為什麼呢550+450不是1000嗎?1020的寬度，應該容得下，但是要考慮到邊界的設定，有時你邊界margin或padding設10px，很容易就超過寬度了，如果不懂綸太郎以上所說的，請參考Blogger template模板教學課程---CSS外觀解說一文說明。

這張圖就是邊欄往下掉的畫面


所以版面被擴張，會發生這種情形，但是現在很多人都會利用在相關語法裡，例如在main-wrapper加上
overflow: hidden;
讓超過寬度的圖片或元件就會部分被隱藏，通常可以解決圖片大於本文欄位的問題。

而有些會再加上IE專用的
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 */
如果你的部落格在IE下有邊欄往下掉的情形而Firefox沒有，應該是上述這些原因，可以加上這些語法試看看，是否可以挽救回來，不然就是要看一下寬度的問題。

如果你的部落格在任何瀏覽器下觀看，都是首頁部分的邊欄(sidebar)往下掉，而單篇文章很正常的話，應該就是目前新版編輯器造成的錯誤現象，

當你要插入"繼續閱讀"(Read More)的作用時，通常會在撰寫模式下在想段落的地方直接按下繼續閱讀的圖示，


或是在修改Html的文章區內為插入語法
<!-- more -->
以下這張圖就是我在撰寫模式下按下繼續閱讀的標記，而到修改html就可看到產生的語法如下，


目前就是這個插入語法的位置發生了錯誤，以一個正常的文章段落而言，通常會產生類似以下的語法，
<div>文章內容.......</div>
意思就是要用div這個區塊語法來包裹住文章內容，而目前發生邊欄往下掉的原因就是
<!-- more -->跑到div區塊裡面了，例如上面第二段文章的區塊，我用粉紅色特別標明的，這裡面夾雜了一個<!-- more -->，就是亂入，在區塊文章未完成之前就使用了<!-- more -->這個語法，所以導致了你的邊攔往下掉。

如何解決呢?

就是將這個<!-- more -->語法，移到區塊文章結束的地方，就是在該段文章</div>的後面，就能解決邊欄往下掉的問題了，這是綸太郎實驗過後的結果，會產生這樣的情形，通常是寫作者在標記繼續閱讀的Mark時，忽略了文章段落的屬性，而隨便加在自己想加的地方，想斷就斷，而不是斷在一篇文章段落結束的後面，就像上面的圖片，我將繼續閱讀插入

以唱誦『南無<!-- more -->妙法蓮華經』為主，也是日蓮宗七大本山之一，

任意將繼續閱讀的標記插在文章中間，就會發生這種情形，算是繼續閱讀亂入的結果吧，就像官方的定義，"You Might As Well Jump!"，可以讓你跳，但是要跳到哪裡自己也是要注意的。

所以建議搬家來這的人，或是圖片較多且喜歡將文章置中或是調整位置的朋友，使用新版編輯器時要注意DIV的問題，因為舊板是利用span class="fullpost"的語法來分頁，span不會有推擠區塊的問題，所以建議還是直接用html語法插入，比較不會錯，有問題的朋友，再留言討論。

延伸閱讀：
Blogger文章編輯區新版模式正式啟用