ブログのサイドバーが下にくる

質問

まず、始めにこれは宣伝ではありませんので、承知の上回答ください。
私はこのブログを運営しているのですが、右サイドバーの様子が少しおかしいみたいです。

いや、サイドバーがおかしいというより、IEがおかしいのかもしれませんが、定かではありません。このブログを開くと右サイドバーが下にきます。それは画面サイズに対してコンテンツが大きすぎると起こると認識しているのですが、間違いないでしょうか？
ですが、IEの最大化ボタンを押すとちょうどおさまります。
画面サイズが兎に角問題なんだなと思い、新規ウィンドウのサイズを画面いっぱいまで広げる方法を試しましたが、いくら大きくなってもおさまりません。これ以上大きくならないくらいまで広げても、おさまりませんが、なぜか最大化を押すとおさまります。

最近はソースをいじってないので、HTMLが問題なのかわかりませんが、考えられる原因は、
昨日FC2ブログのプロフィールに写真をつけてみました。その後から形がくずれましたので、今はプロフィールを削除しています。
もう一つが、cclaenerでクリーンナップして、そのときにIEにウィンドウズサイズの履歴を削除　という欄があって、削除されたと思います。
ちょうど形がくずれる前にこの二つの作業をしたので、この二つのどちらかが原因なのかと思いますが、HTMLで解決できるのであれば、教えていただけたら幸いです。
いろいろ試行錯誤したため、ソースもちょっと理解できる領域を超えてしまいました。もしかしたらどこかにおかしな記述があるかもしれません。よろしくお願いします。

もし、解決策がわからなくても、上のブログをあなたのブラウザで見たときどう写るか教えていただけるとありがたいです。
その時、使っているブラウザとできればあなたのパソコンの画面サイズを教えてください。横だけでも
最近ワイド型のディスプレイがあるため気になります。

ちょっとややこしい質問ですが、お時間がある方はどうぞ少しお時間を割いていただきたいです。

回答No.5

cieux · ベストアンサー

No1=No4です。たびたび失礼します。
うちの環境ですと、編集前は全画面表示でも下に回りこんでいました。
キャッシュを読み込んでいる可能性がありますので、Ctrl＋F5を押して再読み込みをしてみてください。
それでも直らないなら、ソースを弄るしかないと思います。
・左、中央、右のいずれかのwidthの指定を削除する（これをするなら、中央が妥当かと）
・pxではなく%で指定する（折り返しが多くなると思いますが）
・頑張って<div>を<table>で書き直す（これなら確実に並びはしますが…）
・諦めて幅を狭くする
このあたりがWebデザイナーではない私に浮かぶ精一杯の解決案です。

一旦この記事を締めてしまって、CSSの質問として、新たにここを参照の上で質問されてみるのも、最終手段的ですが、手かもしれません。

補足

回答本当にありがとうございます。m(_ _)m
ctrl＋F5を押しましたが変化はありませんね。
やはりソースですか、cieuxさんがいくつか上げてくえた選択肢のうち試しました
pxではなく、%にする　ですが、サイドバー内にもtableを使ってますので、ものすごい形がくずれて直す気力もうせましたので、それはやめまして、中央のwidthを削除してみましたら、やはり右は下に回り込みします。そして、中央が右いっぱいまでスペースを埋めてしまいます。

<div>を<table>に直す作業はもし始めたら今年中には終わらない気がしますので、それはやめます。笑

一番てっとり早いのが狭くするですねぇ～
ですが、実はとある記事でtableを使ってしまったので多少壊れる可能性が高いです...

もう少し回答を待ってみてそれでも解決できなかったらcssに再質問します。ありがとうございました。

回答No.4

cieux

No2です。補足のURLは、1024X768のIE6では、ずれてますね。
ローカルで多少弄って実行してみたところ、オセロの書き込みが問題みたいですねえ。
あのエントリーを削除すると、全画面なら表示されました。
詳しい原因は調べていませんが、書き込んだ内容を保存した上で、ためしにエントリーを削除してみてください。

補足

わざわざお時間を割いていただいてありがとうございます。
オセロの記事を削除してみましたが、変化はみられませんでした、
全画面にすれば、少なくとも私のブラウザでは間違いなく私の思ったとおり表示されます。cieuxさんのブラウザでは表示されませんか？？

たぶん原因は先ほど記述しましたが、左サイドバーwidth　240px枠に300pxの画像を入れてみたことにありそうです。

誰か直す方法を知ってる人がいましたら、ぜひ教えてください。

回答No.3

ranuwe

cssでfloatを指定すると同時にwidthを指定していませんか？
指定されているwidthより大きい画像を入れるなどによって強制的にwidthが伸ばされた結果
サイドバーが下にさがってしまうブログを最近よく見ます。
レイアウト崩れなくfloatを使ってカラム分けしたい場合は、どれくらいの
widthまでの画像が入るか見極める必要があります。

補足

確かにwidth指定はしています。
/* サイド左 */
#left {
width: 240px;
float: left;
padding: 0px;
text-align: center;
overflow: hidden;
}
そして、思い当たる節もあります。昨日プロフィールに登録した画像がwidthは240pxなのに対して、300×287の画像を登録してしまいました。

ですが、画像はもう貼り付けていませんし、ワイドもおれ以上変更すると変になるというより、今のバランスがちょうどいいので変更はしたくないんですが、解決策はどうすればいいんでしょうか？？

回答No.2

cieux

ちゃんと見てみないとどこを直していいのかまで指摘できませんが、簡潔な回答としては、テンプレートのソースを修正すれば直ると思います。
これ、結構いじってます？
タグの位置がおかしくなっているところがあったりしますが…。

補足

回答ありがとうございます。
タグの数値は変更したりしましたが、位置などは変更してないと思います。
基本のHTMLとCSSは数値変更の程度ですが、サイドバーにあるものでタグなどを使ってるものは変な記述があるかもしれません。

ちなみあのデザインは、[usedpc]さんの、「simple_3column」というテンプレートを使用してます。このデザインです。http://ver116.blog32.fc2.com/?style3=11859&index
これもずれているのであれば、問題はもしかしたら作者さん側にあるのかもしれませんが、私が作ったわけではなく、あなたの記述に間違いがあるとは言えないので、私の方を直すのが先決かなと思います。

ただ、ブログのテンプレートは独自変数なども使うことになるので、私からみたらかなり複雑な記述になってます。

回答No.1

noname#66720

画面サイズ： 1280×1024
ブラウザ： Internet Explorer 6

上の条件でコンテンツの左側に空白ができました。
ですが、大きいと言うよりは右側にズレている感じでした。
ウインドウをリサイズするとズレがなくなるのでIE6のバグの可能性が高いです。

補足

回答ありがとうございます。
そうなんです。何か右側にずれていて、右のサイドバーが下にくるみたいです。
今まではそんなことがなかったと思うので、いきなりバグが発生するもんか疑問なんですが...
でもありがとうございました。