サイドのウィジェットが下がってしまっている

質問

http://yesdeafcan.com/
右のサイドのウィジェットが下がっています。
ボックスのはみ出しだと思うのですが、うまくいきません。
アドバイスをお願いします。

回答No.1

Proof4 · ベストアンサー

WordPressのテーマ「First」(http://themehaus.net/ja/themes/first/)をカスタマイズして作られているものと思います。
元のテーマは#content直属の子要素が#primaryと#secondaryの2つしかありませんが、そこに.content-areaやマージン用の空のdiv要素を独自に追加しているため、右の要素(#secondary)が下がってしまっています。

ここでは手っ取り早い解決策として
1. #content直属の子要素を#primaryと#secondaryのみにする
2. #secondaryにposition: absolute;をセットする
の2つを挙げます。

まず1.ですが、元のテンプレートと同様のHTML構造にすることでレイアウト崩れをなくす方法です。#primaryより後で#secondaryより前にある要素をすべて#primaryの子要素にすれば解決すると考えられます。

HTML構造を変えられない、もしくは変えたくないという状況は良くあります。そこで、2.は#secondaryのcssを変更することで問題を解決します。cssを下記の通り変更すると機能します。
・#contentにposition: relative;をセット
・#secondaryで
　　・float: left;を削除
　　・position: absolute; top: 0; right: 0; を追加
PC版以外の見た目にも影響を及ぼすので注意してください。

これら以外に、グリッドレイアウトを利用するという先進的でスマートな解決方法があります。
#contentを縦横それぞれ2分割し、そこに要素を配置するイメージです。
ここでは詳細な実装を省きますが、https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html のページなどが参考になるでしょう。

解決の糸口になれば幸いです。

お礼

コメントありがとうございます。
きれいになりましたが、トップページ以外はレイアウト崩れです。
上記を参考にトップページと他のページのCSSを振り分けるようにします。