アドバイスをよろしくお願いします

解決済

質問者：kita813
質問日時：2009/07/18 19:55
回答数：3件

いろいろと試行錯誤がしているのですがどうしてもうまく行かないことがあります。

まず、div idでleft1、left 2を作ってそれぞれをfloatで左右に分けます。
そのleft1のなかにまたidでboxを作って、cssを使ってboxの周りを
四角い枠で囲みました。
そのboxの中にさらにflostで左右に分けたいと思っています。
左右に分けるのはうまく行ったのですが、BOXの外（真下）に
表示されます。

どうしても中に表示されず困っています。
アドバイスください。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： TanakaHiro
回答日時：2009/07/18 22:01

#boxディビジョンの中身が全てフロートされてるため、UA側で#boxの縦方向の長さを確定できず、結果として#boxのボーダーの下に#menu1と#menu2が表示されることとなってるかと思います。

もし、#boxの一番下に謎の空白が生じても問題ないのであれば、

<div id="left1">
<div id="box">
<div id ="manu1">
<img src="../**.jpeg" width="**" height="**" /></div>
<div id="menu2"><p>aaaaaaa</p></div>
<p id="temp"><img src="../spc.png" width="1" height="1" /></p>
</div>
</div>

(CSS)
#temp {
clear: both;
}

と、フロートを解消するものを入れると、#menu1と#menu2が#boxのボーダー内に表示されると思います。
なお、HTML中のspc.pngは、1px×1pxの空白画像です。

なお、#boxの部分ですが、このディビジョンのボックス全体の幅は、width指定値の250pxとされたいのでしょうか？それとも、width指定値＋border値の252pxとされたいのでしょうか？

本来のcssの定義では、#boxの全幅は252px（内容部分が250px）となるのですが、IE6では250pxとなります。

同じブロックにwidthとborder・paddingを同時に指定すると、UAによって描画が異なりますので、ご注意下さい。
（このことは、#leftの部分でも同じことが言えます。）

- 0
- 件

通報する

No.2

回答者： u2122
回答日時：2009/07/18 20:59

ソースがないので分からないのですが、

>BOXの外（真下）に表示されます。

って事ですが、CSSの文法的な間違いか、コロンの付け忘れとか・・・。又はwidthの幅の設定がおかしいのではないでしょうか？

この回答への補足

HTML部分は
<div id="left1">
<div id="box">
<div id ="manu1">
<img src="../**.jpeg" width="**" height="**" /></div>
<div id="menu2"><p>aaaaaaa</p></div>
</div>
</div>

css部分は
#left1 {
float: left;
width: 258px;
font-size: 9px;
padding-top: 15px;
padding-bottom: 50px;
}
#wrapper #contents #side1 #num1 {
width: 250px;
border: 1px solid #CCC;
}
#manu1{
float:left;
}
#manu2{
float:right;
}