divボックスを2つに分けたいです。

[新着] Webテンプレートを仮オープンしました

0   名前： 雪 ： 2006/05/13（土） 10:21  ID:dbHvwFtC
/*css*/
#a{
width:50%;
height:100px;
background:skyblue;
float:left;
}#b{
width:50%;
height:100px;
background:pink;
float:left;
}

<!--html-->
<div id="a"></div>
<div id="b"></div>

このようにすると、IEでは、id="b"が、id="a"の右下に改行された様な感じになり、画面二つに分ける事が出来ません。
どのようにすれば、きちんと並べることができますか？
1   名前： 匿名 ： 2006/05/13（土） 10:21  ID:Iz2k4TNT
コピーペーストで下記のように貼り付けてみたら、IEとFireFoxではきちんと横並びのボックスになっていましたよ。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<STYLE TYPE="text/css">
<!--
#a{
width:50%;
height:100px;
background:skyblue;
float:left;
}#b{
width:50%;
height:100px;
background:pink;
float:left;
}
-->
</STYLE>
</head>

<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

2   名前： 匿名 ： 2006/05/13（土） 10:21  ID:dbHvwFtC
私のは、このようになっていました。
↓これが何なのか分からないんですが、他のサイトなどで、「これを付けて下さい。」と言われたので、付けています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
最後に"http://www.w3.org/TR/html4/loose.dtd"を付けるのと、付けてないのとでは、表示が違ったりするのですか？(;＾ー＾)
3   名前： Z ◆XTzyosZXcL ： 2006/05/13（土） 10:21  ID:v5nGHgzA
>>最後に"http://www.w3.org/TR/html4/loose.dtd"を付けるのと、付けてないのとでは、表示が違ったりするのですか？(;＾ー＾)
　一部のユーザーエージェントでは、DTDのURIがあるなしでレンダリングが変わるそうです。
　「DOCTYPE スイッチ」で検索してみてください（このサイトでも以前の書き込みでこの件が指摘されています）。
4   名前： 匿名 ： 2006/05/13（土） 10:21  ID:dbHvwFtC
色々なサイトを見て回ったら、分かったことがあります。
フレームセットが一番自由頻度が高いのですね。(*＾ー＾)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

なので、フレームセットのやつでやってみました。

ここからhtmlです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html><head><title></title><link rel="stylesheet" type="text/css" href="index.css"></head><body>
<div id="a"></div><div id="b"></div>
</body></html>

ここからcssです。
html,body{
margin:0px;
paddin:0px;
width:100%;
height:100%;
background:white;
}#a{
width:50%;
height:100px;
background:skyblue;
float:left;
}#b{
width:50%;
height:100px;
background:pink;
float:left;
}

これで、やってみたのですが、やっぱりうまくいきませんでした・・・。
5   名前： Pid ◆byEkK9OALr ： 2006/05/13（土） 10:21
>>0
width の合計が 100% にならないよう調整して下さい。
http://www.geocities.jp/multi_column/practice/2column1.html#liquid

>>1-3
NN4 および WinIE 互換モードの width 値には，padding と border 幅も含まれます（CSS2 仕様および WinIE 標準モードでは含まれません）。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height

>>4
誤解です。Frameset DTD では「body 要素の代わりに frameset 要素を使う」のですから，html 要素直下に body 要素は置けませんし，フレーム対応のブラウザでは悲しいことになります。
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/05/13（土） 10:21  ［URL］  ID:O5hEMlpW
> フレームセットが一番自由頻度が高いのですね。(*＾ー＾)

> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

これは、フレーム割を行うページにしか使えません。

で、まぁ floatによる段組は、下記サイトが詳しいと思います。
http://www.geocities.jp/multi_column/

7   名前： Z ◆XTzyosZXcL ： 2006/05/13（土） 10:21  ID:v5nGHgzA
>>色々なサイトを見て回ったら、分かったことがあります。
　実は、解説サイトより仕様書に当たる方が早道だったりすることがあります。

文書型について）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.2
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.2

要素索引）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html
http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html

属性索引）
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/attributes.html
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/attributes.html

　かならずしも解説サイトの解説が正しいとは限らないため、疑問を感じたら仕様書と見比べてみるとよいでしょう（慣れればそんなに難解な文章ではないですよ）。
8   名前： １の匿名 ： 2006/05/13（土） 10:21  ID:Iz2k4TNT
>>5
申し訳ないです。エディタソフトの初期テンプレそのまま使用したので、例の記述で互換モードのままになってましたね；
ご指摘ありがとうございます。

>>0
どうしても画面１００％を色わけしたいんだ！
余白を見せたくない！
という場合、こういう方法はどうですか？

idがaのボックス内に何か入れたい場合には、中で段組したほうがいいと思いますけれども。

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<STYLE TYPE="text/css">
<!--
body {margin:0px;}
#a{
width:100%;
height:100px;
background:skyblue;
text-align:right;
}#b{
width:50%;
height:100px;
background:pink;
}
-->
</STYLE>
</head>

<body>
<div id="a">
<div id="b"></div>
</div>


</body>
</html>

一覧へ戻る