[CSS] 入れ子DIVの、親・子両方でFloatする方法

締切済

質問者：mill_2006
質問日時：2007/10/27 01:45
回答数：2件

ベテランの皆様で、もしこの問題の解決策をお持ちの方がいらっしゃったらぜひよろしくお願いいたします。

入れ子になっているDIVを、CSSで配置しようとしています。

<DIV>
　　<Div>左上のロゴ画像（Float: Left）</Div>
　　<Div>右側のメニュー（Float: Left）2段にする
　　　　　<div>1段目　text-align: right</div>
　　　　　<div>2段目　この中にも入れ子でFloat leftのDIVと画像を並べる</div>
　　</Div>
</DIV>

という構造を作りたいのですが、
<div>2段目　この中にも入れ子でFloat leftのDIVと画像を並べる</div>
↑の中、及び
<Div>右側のメニュー（Float: Left）2段にする
の部分が、IE6、Opera6でうまくfloatされません。

文章で書くとわかりづらいため、図にしたものをアップしてみました。
http://sakuratan.ddo.jp/imgboard/img-box/img2007 …

ソースコードを以下にコピペしますので、それぞれ
「test.html」「testcss.css」
といった名前をつけて同階層に保存していただけると、現象見えると思います。

この問題でずっと頑張っているのですが・・何か解決策お持ちの方、どうぞよろしくお願いいたします。

以下、ソースコード

-------------------------test.html-------HTML部------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta name="robots" content="index,follow" />
<title>トップページ</title>
<link href="./testcss.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="fmMain" id="fmMain" method="POST" action="" enctype="multipart/form-data">

<div id="wrap">

<div id="header">

<div id="navi">

<div class="logo" style="border:0;">
<a href="./"><img src="./img/index/navi_home.jpg" alt="ホーム" border="0" /></a></div>

<div class="left">

<div id="navi_favor">
このページをお気に入りに登録できます <input type="submit" name="brSrch" value="登録" />
</div>

<div id="navi_items" style="padding-left:20px;">

<div class="navi_item_tsushin">
<a href="#"><img src="./img/index/navi1.jpg" alt="" border="0" /></a></div>

<div class="navi_item_campain">
<a href="#"><img src="./img/index/navi2.jpg" alt="" border="0" /></a></div>

<div class="navi_item_shop">
<a href="#"><img src="./img/index/navi3.jpg" alt="" border="0" /></a></div>

<div class="navi_item_link" style="border: 0;">
<a href="#"><img src="./img/index/navi4.jpg" alt="オススメリンク" border="0" /></a>
</div><br clear="left" />

</div>
</div>
</div>
</div>

</div>

</form>
</body>
</html>

-------------------------testcss.css------CSS部------------------

@charset "euc-jp";

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

body {
background-color: #FFFFFF;
font-size:10px;
line-height: 12px;
font-family: "MS P ゴシック", Osaka;
}

#wrap {
width: 610px;

}

#header {
width: 610px;
}

#navi {
clear: left;
}

#navi_favor {
padding:10px 3px 20px;
text-align: right;
color: #436921;
}

#navi_items {
pading-left: 30px;
width: 450px;
}

#navi .navi_item_tsushin{
float: left;
border-right: 2px solid #335914;
width: 99px;
}

#navi .navi_item_campain{
float: left;
border-right: 2px solid #335914;
width: 132px;
}

#navi .navi_item_shop{
float: left;
border-right: 2px solid #335914;
width: 90px;
}

#navi .navi_item_link{
float: left;
border-right: 2px solid #335914;
width: 116px;
}

.logo {
/* position:relative;
*/ float: left;
width: 136px;
margin-right: 3px;
}

.left {
/* position:relative;
*/ float: left;
width: 470px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： tsunami02
回答日時：2007/10/27 17:07

フロートはされてますよ、こちらIE6は無いので7で確認しました、またOpera6も無いので8.5で確認しました。

図にしたリンク先が見れないので、あなたのやりたいことが明確につたわっていないかも知れませんが、フロートは効いてますね。

- 0
- 件

通報する

No.1

回答者： suiris
回答日時：2007/10/27 07:09

う～ん。

IE6で確認させていただきましたが、Firefoxなどと同じように表示されているように思えます・・・。Operaは最新版の9.24なので同じように表示されます。
画像ファイルの大きさによってもある程度の範囲に収まるような画像であれば図解のように表示されています。

私のチェックの仕方が悪いのかもしれないですので、実際の完成版となるページを見させていただくことはできないでしょうか。