質問: 右のサイドのウィジェットが下がっています。 ボックスのはみ出しだと思うのですが、うまくいきません。 アドバイスをお願いします。
回答: WordPressのテーマ「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分割し、そこに要素を配置するイメージです。 ここでは詳細な実装を省きますが、 のページなどが参考になるでしょう。 解決の糸口になれば幸いです。