divが思うように使いこなせず困っています。

質問

divが思うように使いこなせず困っています。
下記のようにした場合、背景色や、width:100; height:100の指定は無視されてしまいます。
(動作確認はfirefox3でしています)
width:100; height:100と指定していてもサイズが小さければ小さくなってしまうのでしょうか。
サイズの固定方法と、一番外のdivを効かせる方法をどなたか教えていただけますか？

<div style="min-height:50; width:200; background-color:#FFFF00;">
<div style="width:200; height:100; float:left">
<p>testtest</p>
<p>testtest</p>
</div>
<div style="width:100; height:100; float:left">
<p>testtest</p>
<p>testtest</p>
</div>
</div>

回答No.1

naokita · ベストアンサー

<div style="min-height:100px; width:200px; background:#FF0; overflow: hidden;">
<div style="width:50%; float:left;">
<p>testtest 1</p>
<p>testtest 2</p>
</div>
<div style="width:50%; float:left; background:red;">
<p>testtest 3</p>
<p>testtest 4</p>
</div>
</div>

何をしたいのかわかりませんが、
上記例で良いと思いますが、
わかり易く background:red;（右側が赤色）としている。

旧IEでは背景色が出ると思いますが、
Fxなどは正しく解釈してくれるので、背景色が出ない。
基本的な指定や利用法が間違っているからです。
--------------------------------------------
サイズにpxなどの値を入れる事。
フロートしてあるから左右に分けたいと思いますが、
親DIVの幅が200pxなのに、その下が200なら枠内にしか収まらない。
width:200px;＋width:100px;＝width:300px;
その枠が200で良いのならフロートも枠幅も不要。

左右にフロートで分けたいのなら、
width:100px;＋width:100px;＝width:200px;
width:200px;割２なら＝width:50%;

縦min-height:50pxって意味分かりますか？
最小幅ですから、その中がheight:100pxなら意味が無い。
普通は、heightは利用しません。
（フロートを揃えたり背景画像がある場合には使う）
理由は、フォントサイズだけを特大に拡大すればわかります。
必要ならheight:100px;としましょう。
モダンブラウザ用にmin-heightt:100px;でも良いし、併用でも良い。

親DIVは、フロートだけのDIVを解釈しないので、
（IEは解釈する）clearで解釈させる。
（今回は意図がわからないので、 overflow: hidden;で対応）

例の数値は質問者さんの意図通りに設定してみましょう。
枠幅の設定はモードによっても違うので気をつける事。
全面的に制作していると思いますが、基本な部分を覚えないと後から何度も苦労しますよ・・・

お礼

今開発環境にいないので実際のソースがないのですが、
外のdivを突き破って中身が出てしまうので仕方なくheightで中身分の高さを設定したり
中身分をmin-heightで設定すればいいのかな…？と思って設定してみましたがうまくゆかず困っておりました。
(中身は両方100pxにするつもりだったのを間違って片方200pxと書いてしまいました、すみませんorz)
→min-heightもそういえばそうですねすみません。。

自宅環境はIE６のみですが
書いていただいたコードをhtml文書にしてプレビューすると
確かにちゃんと外のdivにおさまってます。

すみません、親切ついでにもうひとつよろしいですか？
divの使い方がよくわかるサイトを教えていただけませんか。
(質問内容と若干ぶれてしまいますがorz)
divを使い始めたのはここ最近でtableでページ構成するのに慣れてしまっているので
divについてはかなり疎いと自分でも思います。
とほほの…とかで端的な情報はみるんですがdivの基本についてズバリ解説されてるサイトが
あれば見て勉強したいのですが、ご存じではないでしょうか。。。

回答No.2

naokita

NO.1の回答者です（お礼拝見済み）

誤　min-heightt:100px;　正　min-height:100px;　失礼。

DIVではなく、ブロック要素を学べばDIVが理解出来ます。
DIVは、他のブロック要素と違って中身の無い単なる入れ物ですからズバリの解説も何もありません。DIVの中身をどうするかによって、DIVを使い分ければ良いだけです。
通常は、横幅100％で表示されるので、
必要ならwidthを設定したり、IDやclassを付与してCSSを設定します。
これだけです。

今回のfloatは、初心者なら必ずぶつかる壁で、
ここで諦める初心者が多いようです。
float ＋ width ＋ clear の３点セットが基本です。
レイアウトが崩れたり、背景が出なかったりするのは、この基本を学ばずに進むからでしょう。
HTML,CSSは、基礎から順に覚えなければ、後々苦労します。
IE6環境なら、Firefoxかchromeでも入れて表示確認した方が良いでしょう。
あとは、覚えたHTML,CSSをどう応用するかが問題なのです・・・

あ、サイトですが特にはありません。その都度調べましょう。
その前に、(X)HTML,CSSの分厚い参考書を買えば１冊で十分役立ちます。
人それぞれの手法があるので、
各々色んな応用方法から自分に合う方法を見つけていますので。
今回のfloat,clear方法ですら、数種類あるんですよ・・・

お礼

遅くなってしまいすみません。
ブロック要素ですか、了解です。
持ってる分厚いhtml書をもういちど読み直して見ます。
ありがとうございます～。