みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

このCSSの設定で何故こうなるのでしょうか?

cssの定義は以下のようにしました。
#L_side {
float:left
height: 1000px;
width: 100px;
float: left;
}
#ctr {
float :left;
height: 1000px;
width: 720px;
}
#R_side {
float: left;
height: 1000px;
width: 100px;
}

htmlは
<body>

<div id="L_side"><img 画像L(サイズは100x1000) ></div>・・・・これをAとします
<div id="ctr"><img 画像C(サイズは720x1000) ></div>・・・・これをBとします
<div id="R_side"><img 画像L(サイズは100x1000) ></div>・・・これをBとします


</body
としました。
これをブラウザで表示させたら
Aの隣にBの画像が表示されましたがCの画像は改行されたかのようにAの下に表示されました。
私の意図したのはABCと並んで表示されると思ったのですが(カタカナの"コ"の字を反時計まわりに90度回転したような形で)、これは何故でしょうか?

投稿日時 - 2010-12-12 16:04:32

QNo.6379760

困ってます

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

#L_sideのfloatに;が書いてないですが・・・
コピペでなければしかとしてくださいw

これそのままだと、ブラウザサイズに表示が左右されます。
(全部のdivを足すと970pxですが、これよりブラウザ幅が小さいと勝手に回り込みを行う。)

なので、全体を970pxのDIVでかこって、回り込みさせなければよいです。

-- css --

#wrapper{
padding:0px;
margin:0px;
width:970px;
height:auto;
}

#L_side {
float:left
height: 1000px;
width: 100px;
float: left;
}

#ctr {
float :left;
height: 1000px;
width: 720px;
}

#R_side {
float: left;
height: 1000px;
width: 100px;
}

-- HTML(bodyの中) --

<div id="wrapper">
<div id="L_side">ほにゃらら</div>
<div id="ctr">ふにゃらら</div>
<div id="R_side">へにゃらら</div>
</div>

投稿日時 - 2010-12-12 16:45:27

お礼

ありがとうございました。#wrapperで包んであげたらうまくいきました。
そういうことなんですね。
float:leftはfloat:left;と正しく記述されていました。大変失礼いたしました。

投稿日時 - 2010-12-12 17:24:47

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

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

回答(1)

あなたにオススメの質問