こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

floatの使い方

すごく初歩的な質問をさせて下さい。

DW5.5を使用しております。

「contents」というdivの中に「main_1」と「main_2」というdivを入れたいのですが、
floatを使用するとcontentsの下側に回ってしまいます。

「main_1」を左寄せに、「main_2」を右寄せにして「contents」内にはめるには
どのようにすればよいのでしょうか?

どなたかご教授下さい。


<<ソース>>


<body>
<div id="contents">
<div class="main_1">
</div>
<div class="main_2">
</div>
</div>
</body>


<<css>>


*{
margin:0px;
padding:0px;
}

img{
border:none;
}

li{
list-style-type:none;
}

body{
font-size:12px;
line-height:1.4em;
font-family:"MS Pゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
background-color: #333333;
margin:0px auto;
}


/* FireFox リンク選択時の点線を消す */
a{
overflow:hidden;
outline:none;
}

/* FireFox flashの境界の点線を消す */
object{
outline:none;
}

#contents{
width: 940px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
background: #000 url(../img/con_main.png) repeat-y;
padding-top: 42px;
padding-left: 60px;
}
.main_1{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
padding-left: 40px;
width: 550px;
float: left;
height: 500px;
}
.main_2{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
float: right;
width: 296px;
padding-right: 30px;
height: 500px;
}

投稿日時 - 2012-03-29 22:54:06

QNo.7391488

すぐに回答ほしいです

質問者が選んだベストアンサー

>「contents」というdivの中に「main_1」と「main_2」というdivを入れたいのですが、
>floatを使用するとcontentsの下側に回ってしまいます。
ありがちな思い込みです。きちんと、contentsの中に入っています。
思い込みの原因はmain_1とmain_2をfloatさせていること。floatとは右に寄せる、左に寄せるだけのプロパティではありません。本来の流れから切り離して(浮かせて)寄せます。浮動させますので、高さがもてなくなります。中身がすべて浮いているので背景色は下まで伸びません。

今回の場合ですと、
contentsにも高さ500pxを指定する。
または
main_2のfloatを取ってしまう。つまり、浮かすのをやめる。
という簡単な方法で対処できます。

main_1とmain_2の高さが同じで、あらかじめ決まっているようですと上記の方法で簡単なのですが、成り行きだと若干面倒くさいですので、よかったですね。めんどくさいことになった場合は、「float 背景」で検索されることをお勧めします。対応策も含め原因を図入りで解説しているページが多数見つかります。あと、floatを使うなら「clear」というプロパティの理解も必要になります。

投稿日時 - 2012-03-30 06:00:11

ANo.1

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)