inclusionBoxes

please compare

  1. plain
  2. clearfix
    ※content: ""; にNetscapeが対応していない。
    ※content: "."; の場合で、HTML4.01 Transitional のとき、Operaで1行分の隙間が空く。
    ※content: url("clearfix.gif"); の場合で、HTML4.01 Transitional のとき、Operaで1px（※clearfix.gif分）の隙間が空く。
  3. inclusionBoxes (HTML4.01 Transitional)
  4. inclusionBoxes (XHTML1.0 Strict)

3. inclusionBoxes (view source) の方法であれば、スマートかつ安全にボックスを包含できるようになるのではないか、という提案です。

動作確認ブラウザ: IE6, 7 / Fx 2 / Opera 9.5 / NN 7.1 / Safari 2, 3

view source

plain

view sample

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>inclusionBoxes - tshinobu.com</title>
	<style type="text/css">
		.layoutbox{
			background: #EEE;
		}
		.innerA{
			float: left;
			width: 200px;
			height: 1000px;
			background: #F99;
		}
		.innerB{
			float: left;
			width: 600px;
			height: 500px;
			background: #99F;
		}
	</style>
</head>
<body>

	<div class="layoutbox">
		<div class="innerA">innerA</div>
		<div class="innerB">innerB</div>
	</div>
	<div class="layoutbox">
		<div class="innerA">innerA</div>
		<div class="innerB">innerB</div>
	</div>

</body>
</html>

clearfix

view sample

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>inclusionBoxes - tshinobu.com</title>
	<style type="text/css">
		.layoutbox{
			background: #EEE;
		}
		.innerA{
			float: left;
			width: 200px;
			height: 1000px;
			background: #F99;
		}
		.innerB{
			float: left;
			width: 600px;
			height: 500px;
			background: #99F;
		}
		/*----- clearfix scheme -----*/
		div{
			display: inline-block;
		}
		div:after{
			height: 0;
			visibility: hidden;
			content: url("clearfix.gif");
			display: block;
			clear:both;
		}
		/* hide MacIE \*/
		* html div {height: 1em;}
		div {display: block;}
		/* ini */
	</style>
</head>
<body>

	<div class="layoutbox">
		<div class="innerA">innerA</div>
		<div class="innerB">innerB</div>
	</div>
	<div class="layoutbox">
		<div class="innerA">innerA</div>
		<div class="innerB">innerB</div>
	</div>

</body>
</html>

inclusionBoxes

view sample

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>inclusionBoxes - tshinobu.com</title>
	<style type="text/css">
		.layoutbox{
			background: #EEE;
			overflow: auto;
		}
		* html .layoutbox{
			zoom: 1;
			overflow: visible;
		}
		.innerA{
			float: left;
			width: 200px;
			height: 200px;
			background: #F99;
		}
		.innerB{
			float: left;
			width: 600px;
			height: 50px;
			background: #99F;
		}
	</style>
</head>
<body>

	<div class="layoutbox">
		<div class="innerA">innerA</div>
		<div class="innerB">innerB</div>
	</div>
	<div class="layoutbox">
		<div class="innerA">innerA</div>
		<div class="innerB">innerB</div>
	</div>

</body>
</html>
  1. overflow: auto / hidden でモダンブラウザでfloatする二つのボックスを包む。
    ※ただし overflow: hidden はNN7.1でボックスを非表示にしてしまうので今回は auto を使用する。
    ※MacIE5ではoverflow:visible以外ではスクロールバーを表示してしまうので、E6以下向けハックが適用されていなければ、ホーリーハックを使ってMacIE5には適用されないようにする。
  2. IE6以下でoverflowを使用すると、マウスのオートスクロール機能（中央ボタンをクリック）が使えなくなるので、スターハックを使ってoverflow:visibleの指定を行い初期化する。
  3. IE6以下でfloatする二つのボックスを包むにはhasLayoutプロパティがtrueになればよいため、width: xxx / height: xxx / zoom: 1; / display: inline-block; / writing-mode: tb-rl などを指定してhasLayoutをtrueにする。今回はWinIEにおいて実際のheight値が指定のheight値を超えるという特性を生かして、 /*HiddenMacIE5\*/ heihgt: 1%; /**/ を使用した。

back to home