2つのブロックを枠線で囲みたい

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



0   名前: しげ吉 : 2006/12/17(日) 19:00  ID:t7nOk2Eb
質問させてください。

隣り合わせたボックス[left,right]を枠線で囲みたいのですが、
”IE.6”では問題がなく囲めるのですが、”NS.7”では枠線がずれてしまいます。
何とか枠線で囲む方法はあるのでしょうか。
なにとぞ宜しくお願いいたします。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>枠に収めたい</TITLE>

</head>
<STYLE TYPE="text/css">
<!--

body {
background: #000000;
margin: 18px 0px 0px 20px;
color:#ffffff;
}


.waku
{
width:200px;
height:200px;
padding:0px;
border-style:solid;
border-color:#FE0523;
border-width:1px 1px 1px 1px;
}

.left
{
background-color:#515A3A;
width:100px;
height:200px;
float:left;

}

.right
{
background-color:#626C64;
width:100px;
height:200px;
float:left;
}

-->
</style>
<body>



<div class="waku">


<p class="left">
<p class="right">

</div>
</body>
</html>







1   名前: oga : 2006/12/17(日) 19:00  ID:cWw8hLch
私はデフォルトcssをユニバーサルセレクタ( * )で一度リセットしてからcssをいつも書いています。
body要素のmarginを枠を寄せるためのものとして以下のCSSに書き換えてみました。
*で一度すべてのマージン、パディングを0にして、.wakuにマージンを与えました。
<STYLE TYPE="text/css">
<!--
*	{ margin: 0; padding: 0; }
body {
background: #000000;
color:#ffffff;
}
.waku
{
width:200px;
height:200px;
margin: 18px 0 0 20px; 
padding:0px;
border-style:solid;
border-color:#FE0523;
border-width:1px 1px 1px 1px;
}
.left
{
background-color:#515A3A;
width:100px;
height:200px;
float:left;
}
.right
{
background-color:#626C64;
width:100px;
height:200px;
float:left;
}
-->
</style>


2   名前: key-child : 2006/12/17(日) 19:00  ID:RGl3C7SI
left、rightクラスにmargin:0を設定しましょう。

3   名前: しげ吉 : 2006/12/17(日) 19:00  ID:t7nOk2Eb
ogaさん、key-child さん、
お答えくださってありがとうございました、
解決しました、
感謝いたします。

一覧へ戻る