サイドバーのカラム落ち

  • kazuya6012

    (@kazuya6012)


    12年、 6ヶ月前

    【CSSについて】
    現在、wordpressでブログ制作をしています。
    （http://zbzblog.com/）
    その際に、サイドバーを設置しようとしているのですが、カラム落ちしており、解決策がわかりません。

    要素の検証を見ると（画像参照）、<div class=devider></div>のmarginが右にも飛び出しているため、サイドバーが右に回り込めない状態となっているのかなと思います。

    しかし、CSSでは、margin-bottomしか設定しておらず、marginが親要素であるcontentsのwidth=940の範囲まで広がる原因がわかりません。（deviderにはwidth=700を指定しています。）

    色々質問の不手際があるかも知れませんが、もし、お分かりになる方がいらっしゃれば、ご回答よろしくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • hitaka

    (@hitaka)

    12年、 6ヶ月前

    firebugで検証したところ、divの階層関係が下記の通りになっています。

    div.main-outer
    　　　　div#header
    　　　　div#navigation
    　　　　div#content
    　　　　　　　　div#detail
    　　　　　　　　div#divider
    　　　　　　　　div#detail
    　　　　　　　　div#divider
    　　　　　　　　div#detail
    　　　　　　　　div#divider
    　　　　　　　　div#paging
    　　　　　　　　div#sidebar
    　　　　　　　　div#footer

    kazuya6012さんがsidebarを回りこみさせたいのは、contentに対して
    でしょうか。それなら、sidebarの階層を一つ上げ、contentの幅
    ＋sidebarの幅をmain-outerの幅以内に収める必要があります。

    確認をお願いします。

    トピック投稿者 kazuya6012

    (@kazuya6012)

    12年、 6ヶ月前

    ＞hitaka様
    ご回答ありがとうございます。
    ご指摘頂いた通り、階層が一個下であった為、回り込みしておりませんでした。
    contentの中に、もう一個divを作り、問題解決しました。
    本当にありがとうございます！

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「サイドバーのカラム落ち」には新たに返信することはできません。