[問題] 控制主頁裡面的網頁元素位置錯置

[ThisIsNotKFC ()]

最近玩Blogger覺得頗有趣，在那邊亂調一些東西感覺還不錯，

不過剛才想要新增網頁元素時，卻發現我的網頁元素框框位置很奇怪，

原本應該是要在綠色框框附近的，卻莫名其妙疊在紅色框框的地方

見圖（有點大，要等一下，免下載）http://www.badongo.com/pic/4115791


稍微說一下目前的邊界設定：outer 1024 px,main 650 px,sidebar 280 px

header 700 px,word 680 px ,footer 沒有特別設。

請問有方法可以解決我網頁元素錯置的問題嗎？不然這樣要編輯的時候都

要拉到網誌上或下才會顯示出"編輯"有點麻煩。


「我後來有稍微試著解決一下，因為我有想說會不會是main跟siderbar的

margin設定關係：main,margin: 1px 0px 10 px 5px
             sidebar,margin: 1px 5px  1 px 0px

因為這樣有可能因為main的右邊與sidebar的左邊沒有空格，然後可能擠到原本預設邊界

所以顯示錯置。接著我把 main 零的部份改成3px；sidebar的零也是改成 3px，

雖然是成功隔開點距離，但是網頁元素的畫面還是錯置的啊啊啊啊（抱頭）！


然後我想是不是有一些width設定錯誤導致的呢？（比方說像是main+sidebar的寬度大於

outer之類的）於是我把原本（可參考本篇前面的width值）的數值改了一下：

outer->1000px，main->636px,sidebar->264px,header wrapper->600px(original:700px)

header h1:650->580px，然後在#main-wrapper底下有兩個寬度（我上面說的word就是

下面語法的「下面那個寬度」，但是我不確定是不是因為這個造成的）
（請注意紅色部份即可）
#main-wrapper {
 line-height: 1.4;
 float: $startSide;
 padding: 5px 10px 5px 10px;
 margin: 1px 3px 10px 5px;
 width: 636px;
 border-width: 4pt;
 border-style: groove;
 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 */
 /* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 620px;
}



但是改成之後還是網頁元素錯置啊啊啊啊……實在是想不到要怎麼改了orz


」



另外想請問如果我想要在符合頁面最大寬度（不會用到橫向捲軸的情形下），

我的outer寬度要設多少px比較好呢？

附上目前的模版 http://www.badongo.com/file/10650761

（blog http://tpasworld.blogspot.com/ ）


感謝各位先進的回覆 ^^



--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 123.110.6.104
推 Firedance:將1024改成1000就好了，但是內容的寬度也要改小一點
→ Firedance:主內容和右邊選項寬度最好都在減少15px(或是某邊減30px)
→ ThisIsNotKFC:感謝樓上建議，小弟試試看 ^^
→ ThisIsNotKFC:感謝樓上，成功了！但我發現我忘了問另外一件事囧。
→ ThisIsNotKFC:就是有方法可以解決我網頁元素錯置的問題嗎？不然這
→ ThisIsNotKFC:樣要編輯的時候都要拉到網誌上或下才會顯示出"編輯"
→ ThisIsNotKFC:(已將問題新增至文章中)  orz
※ 編輯: ThisIsNotKFC    來自: 123.110.6.104        (08/02 01:37)
→ ThisIsNotKFC:引號內也是新增的orz，拜託大家了
→ ThisIsNotKFC:目前模版http://0rz.tw/c34tT 錯置圖（檔案較小，
→ ThisIsNotKFC:讀取較快）http://0rz.tw/e24sc
推 a892245:你的#sidebar沒有設定到float
→ ThisIsNotKFC:感謝您！！！！！！！！都快哭了orzz
→ ThisIsNotKFC:解決方式：float:right  （sidebar靠右對齊）