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

締切り済みの質問

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

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

入れ子になっている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/img20071027012919.gif

ソースコードを以下にコピペしますので、それぞれ
「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-transitional.dtd">
<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;
}

投稿日時 - 2007-10-27 01:45:26

QNo.3464623

すぐに回答ほしいです

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

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

回答(2)

ANo.2

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

投稿日時 - 2007-10-27 17:07:38

ANo.1

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

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

投稿日時 - 2007-10-27 07:09:54

あなたにオススメの質問