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

解決済

質問者：choco0213
質問日時：2014/09/07 03:48
回答数：2件

CSSとHTMLのレイアウト崩れに関する質問です。
サイドバーが下にずれてしまう原因として考えられるのは、
ブロック内にある、複数のブロックの幅の合計値が、親ブロックより大きくなってしまうからだと理解しています。
下のURLのブログは、突然サイドバーが下にずれるようになりました。
http://ameblo.jp/life-in-prague/

ためしにChromeのデベロッパーツールで、両サイドバーのウィジェットをひとつひとつ消してみたり、
skinContentsArea（サイドバーとメインコンテンツのラッパーの親ブロック）の幅を広くしたり、
下にずれているサイドバーの幅を10pxまで小さくしたり、
色々試したのですが、どうしてもサイドバーが正しい位置に戻りません。

しかも、「ブログデザインのCSSの編集」のプレビューモードでは、正しく表示されます。
ちょっとややこしい質問ですが、お時間がある方はどうぞ少しお時間を割いていただきたいです。

よろしくお願い申し上げます。

補足
直前に、table .prgevent, .prgevent tr, .prgevent td{padding:1px 10px;background-color:#EEE;}
table .bluecell{background:#0C54A9;color:#FFF;text-align:center;}をCSSに追加したのですが、関係ないと思います。
）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： zacky93141
回答日時：2014/09/07 07:33

アメーバブログでどこまでの情報をいじれるのかは知らないので、とりあえずずれる理由だけを。

現在のhtml構造は、
<body>
...
<div class="skinContentsArea">
　<div class="skinContentsArea2">
　　<div class="layoutContentsA">...</div> # ←中央＆右サイドバー
　</div>
　<div class="layoutContentsB">...</div> # ←左サイドバー
</div>
...
</body>
となっています。

レイアウトがくずれている理由は
メインコンテンツ(layoutContentsA)でfloat:rightで右寄せを行い、
その後メインコンテンツを包含しているラッパー(skinContentsArea2)のafter要素でclear:bothで寄せ指令を解除し、
サイドバー(layoutContentsB)でfloat:leftで左寄せを行っているからです。

解決方法としては2つあり、
1つ目はclear:bothで寄せ指令を解除する前に左サイトバーを入れること。
具体的には
<div class="skinContentsArea">
　<div class="skinContentsArea2">
　　<div class="layoutContentsA">...</div> # ←中央＆右サイドバー
　　<div class="layoutContentsB">...</div> # ←左サイドバー
　</div>
</div>
とする。

2つ目はラッパー(skinContentsArea2)のafter要素でclear:bothを削除すること。
これはblog.1.009.cssに記述されているようです。