clear:both;を忘れずに

<< 前のページ メインページのテンプレートの修正と画面確認

前回サイドバーを設置し、ブラウザで画面を確認したところ、フッタ部分が最下部ではなくサイドバーの下に表示されてしまうという問題が発生しました。

これは、CSSの仕様であり、floatプロパティで指定したグループの次のグループは、回りこんで表示されるという仕組みになっているからです。

この回り込みを無くすために、スタイルシートのフッタグループ(footer)に次の1行(clear:both;)を追記します。回り込みをクリアしますという命令です。(厳密な仕様は違います。ここでは簡単な説明でおさえます。)

※width指定も追加します。指定しなかった場合、レイアウトがくずれる場合があるためです。

#footer {
clear:both;
width:100%;

padding:30px;
background-color:#3366ff;
text-align:center;
}

これで、フッタ部分が最下部に表示されるようになりました。(下図参照)

2カラム完成

※注意事項として、2カラムレイアウトをスタイルシートで実現するための方法は多くあり、今回取り上げた方法ただ1つしかないということではないことをお知らせしておきます。

次のページ >> カテゴリー一覧をサイドバーに移動する

▲ページトップへ