人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSでのfloat解除ができないので質問です。HTML初心者です。2カラムのレイアウトを作りたくて左カラムをfloat:left 指定しました。2カラムをDivで囲った下にフッターのDivを作りたいのですが、clear:both指定すると、ページの最下部にフッターが離れてしまいます。clear:bothを削除すると2カラムの直下に来るのですがfloat:leftが効いているようで左寄せになってしまいます。どうすればfloatを解除してなおかつ2カラム直下にフッターを配置できるでしょうか。ちなみにMac,ブラウザはchromeで確認しています。別の方より再現できるソースを添付すべきとのアドバイスをいただいたので、以下にURL記載します。
http://jsfiddle.net/zazenhippie/KLACP/


●質問者: zenhippie
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●100ポイント

aside.sub-columnのheightをautoにするのではだめですか?


zenhippieさんのコメント
回答ありがとうございます。aside.sub-columnの方に原因があったんですね。

2 ● ku__ra__ge
●400ポイント ベストアンサー

clear:both指定するとメインコンテンツの直下にフッターが表示されない原因は、右カラム(aside要素)の高さがcssで1000pxに指定されている事です。floatが効いていない要素は、この1000pxの高さを持つ要素の下に配置されるため、ページの最下部にフッターが離れてしまうわけです。

Firefoxの3Dビュー機能で見ると判りやすいですね。
https://dl.dropbox.com/u/619569/20120526/3d.png

.sub-columnに対するheight指定を1000px→700pxに変更することで解決すると思います。

.wrapper #main .sub-column {
 float: right;
 height: 1000px; /* ■■■ ←ここを700pxに変更する ■■■ */
 width: 144px;
 margin-right: 10px;
 font-size: 13px;
 font-weight: normal;
}

zenhippieさんのコメント
的確な回答ありがとうございます。、指摘通り修正したら解決しました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ