Webデザイナーのたまひよさんコミュのcssでfloatがどうしてもうまく行きません。

cssでfloatがどうしてもうまく行きません。
下記の画像のようになってしまいます。わかる方アドバイスお願いします。
（理想）は実現したい形ですが、実際は（実際）の画像のようになってしまいます。
こういう場合、positionを使ったほうがいいのでしょうか？
現在html xhtml cssを勉強中です。webデザイナー、webに詳しい方アドバイスお願いします。

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 05月09日 15:01

hidari01とhidari02を囲む#hidari-wrap,
midge01を囲む#migi-wrapを作って、それにfloat:left,float:rightをかけてみてはいかがでしょうか？

****************css****************
#wrap {
width:600px;
}
#hidari-wrap {
float:left;
width:300px;
}
.hidari01 {
width:300px;
height:100px;
background:#CCC;
}
.hidari02 {
width:300px;
height:100px;
background:#CCC;
}
#migi-wrap {
float:left;
width:300px;
}
.migi01 {
width:300px;
height:300px;
background:#FCC;
}

****************html****************
<div id="wrap">
<div id="hidari-wrap">
<div class="hidari01">
ひだり1
</div>
<div class="hidari02">
ひだり2
</div>
</div>
<div id="migi-wrap">
<div class="migi01">
みぎ1
</div>
</div>
</div>

[2] mixiユーザー 05月10日 01:01

＞まきこ様
ご指導ありがとうございます。
やはりご指摘されたように、左右をもう一度ｄｉｖで囲むしか方法はないようですね。
丁寧に説明いただきありがとうございました！

ログインすると、みんなのコメントがもっと見れるよ