[新着] Webテンプレートを仮オープンしました
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>Test HTML</title>
<meta http-equiv="content-style-type" content="text/css;charset=shift_jis">
<style>
<!--
h1{
color: #d62418;
padding: 20px;
}
.text {
width: 100%; /* textクラス確保の為 */
overflow: auto; /* textクラス確保の為 */
clear: both; /* 移動 */
}
.text div{ /* 旧textクラス */
width: 40%;
float: left;
margin: 20px 5px 0;
overflow: auto;
border: #dbdbdb solid 2px;
}
h2{
margin-top: 30px;
padding: 80px 0 10px 0;
background: url(e.gif) no-repeat 50% 0;
}
-->
</style>
</head>
<body>
<h1>大見出し</h1>
<div class="text">
<h2>1.中見出し</h2>
<div><h3>小見出し</h3><p>あああああ</p></div>
<div><h3>小見出し</h3><p>あああああ</p></div>
</div>
<div class="text">
<h2>2.中見出し</h2>
<div><h3>小見出し</h3><p>あああああ</p></div>
<div><h3>小見出し</h3><p>あああああ</p></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>タイトル</title>
<style type="text/css">
* {
margin:0;
padding:0
}
#second{
float:left;
width:99%;
background-color:#ccf;
}
#first,
#third {
clear:both;
padding-top:30px;
border:2px solid #fcc;
background-color:#cfc;
}
</style>
</head>
<body>
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</body>
</html>計算結果が100%未満となる幅を持つボックスのフロート（直下ではなく）直後のボックスで clear を行い、 でも触れられていた。WinIE では float や clear を指定したボックスのマージンやボーダー、ボックス内の文字や背景色に関するバグがいくつもあります。対処法のひとつは、ボックスに width を指定することです。そろそろ、IE6 のサポートも打ち切りたい所だ（暴言）。