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/

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/06/30 14:54:09
  • 終了:2012/07/01 01:51:18

ベストアンサー

id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402012/06/30 17:23:22

ポイント400pt

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;
}
id:zenhippie

的確な回答ありがとうございます。、指摘通り修正したら解決しました。

2012/07/01 01:50:46

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/06/30 15:09:45

ポイント100pt

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

id:zenhippie

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

2012/07/01 01:50:04
id:ku__ra__ge No.2

ku__ra__ge回答回数118ベストアンサー獲得回数402012/06/30 17:23:22ここでベストアンサー

ポイント400pt

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;
}
id:zenhippie

的確な回答ありがとうございます。、指摘通り修正したら解決しました。

2012/07/01 01:50:46

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません