側邊欄位往下跑 - 部落格

Table of Contents

問題好像是出在#content{}的width太小了
我就你的範本結構畫個簡圖給你看~

本來在還沒有用css去控制之前,大略的區塊是長這樣:
┌────────────────┐
│ body(網頁整體) │ <body>
│┌──────────────┐│
││ #page(網誌整體) ──┼┼→ <div id='page'>
││┌────────────┐││
│││ #header(標頭) │││ <div id='header'>網誌名稱</div>
││└────────────┘││    
││┌────────────┐││
│││ #content │││ <div id='content'>
│││┌──────────┐│││
││││ .post(文章) ││││ <div class='post'>文章</div>
│││└──────────┘│││
│││┌──────────┐│││
││││ #sidebar(側欄) ││││ <div id='sidebar'>側欄</div>
│││└──────────┘│││
││└────────────┘││ </div>
││┌────────────┐││
│││ #footer(底端) │││ <div id='footer'></div>
││└────────────┘││
│└──────────────┘│ </div>
└────────────────┘ </body>

如上圖所示,各區塊是依右邊html原始碼的順序來排列,且大小一致
經過css設定它的寬高和位置以及細部內容的外貌後
才會像你現在網誌的樣子

但你看喔,你的#content{}寬度才680px
可是.post下面包含的.entry{}寬就640px了
導致寬220px的#sidebar塞不下,所以就掉到下面去了

解決方式是拿掉#content{}的寬度設定
這樣#content就會跟#page一樣都是寬950px
950-(640+220)=90 你還有90px的空間可以應用
看是要拿來padding(補白)還是再各給文章和測欄多給一點都可以

※ 引述《vic4370 (嗄ㄚˊ)》之銘言:
: 這是我的網誌:http://oleandergarden.blogspot.com/
: 我的網誌從八月起
: 側邊欄就開始亂跑
: 常常跑到文章底下
: 我想說是文章欄寬度的問題
: 但是改了width後
: 問題還是沒有解決
: 我曾嘗試使用最原始的、Blogger原創的template
: 這個問題好像又消失不見了
: 我也不清楚是不是新template的問題
: 嗚嗚!經營兩年多的網誌
: 裡面有很多很花心思寫的文章啊~~
: 不想因而廢掉....
: 拜託大家的解答了

--
http://lingshu1005.blogspot.com/
something about my life

--

All Comments

Sandy avatarSandy2008-08-29
這篇可以M了~
Hardy avatarHardy2008-08-29
好專業