sytelus/jsbin.maxaqoto.html

## jsbin.maxaqoto.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta name="description" content="CSS Layout Experiments  with absolute, relative, float" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Example C</title>
	<style>
		.box { width: 200px; height: 200px;}
        .child-box { width: 50px; height: 50px;}
		#box_1 { background: #ee3e64; }
		#box_2 { background: #44accf; position: relative; left: 20px; bottom:10px; }
		#box_3 { background: #b7d84b; height:auto; }
        #box_4 { background: orange; float:right; }

        #box_1a { background: darkgreen; }
        #box_1b { background: lightgreen;  position: relative; left: 20px; top:20px; }

        #box_2a { background: darkblue; }
        #box_2b { background: lightblue;  position: absolute; left: 20px; top:20px; }

        #box_3a { background: yellow;  float:right;  }
        #box_3b { background: brown; float:left; }
        #box_3c { background: silver;  }
        #box_3d { background: gold; clear:both; }

	</style>
</head>
<body>
	<div id="box_1" class="box">
      <div id="box_1a" class="child-box"></div>
      <div id="box_1b" class="child-box"></div>
	</div>
	<div id="box_2" class="box">
	  <div id="box_2a" class="child-box"></div>
      <div id="box_2b" class="child-box"></div>
	</div>
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    <div id="box_4" class="box"></div>
     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	<div id="box_3" class="box">
      * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	  <div id="box_3a" class="child-box"></div>
      ----------------------------
      <div id="box_3b" class="child-box"></div>
      <div id="box_3b" class="child-box"></div>
      <div id="box_3b" class="child-box"></div>
      <div id="box_3b" class="child-box"></div>
      <div id="box_3c" class="child-box"></div>
      <div id="box_3d" class="child-box"></div>
	</div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html lang="en">
	<head>
	<meta name="description" content="CSS Layout Experiments with absolute, relative, float" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Example C</title>
	<style>
	.box { width: 200px; height: 200px;}
	.child-box { width: 50px; height: 50px;}
	#box_1 { background: #ee3e64; }
	#box_2 { background: #44accf; position: relative; left: 20px; bottom:10px; }
	#box_3 { background: #b7d84b; height:auto; }
	#box_4 { background: orange; float:right; }

	#box_1a { background: darkgreen; }
	#box_1b { background: lightgreen; position: relative; left: 20px; top:20px; }

	#box_2a { background: darkblue; }
	#box_2b { background: lightblue; position: absolute; left: 20px; top:20px; }

	#box_3a { background: yellow; float:right; }
	#box_3b { background: brown; float:left; }
	#box_3c { background: silver; }
	#box_3d { background: gold; clear:both; }

	</style>
	</head>
	<body>
	<div id="box_1" class="box">
	<div id="box_1a" class="child-box"></div>
	<div id="box_1b" class="child-box"></div>
	</div>
	<div id="box_2" class="box">
	<div id="box_2a" class="child-box"></div>
	<div id="box_2b" class="child-box"></div>
	</div>
	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	<div id="box_4" class="box"></div>
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	<div id="box_3" class="box">
	* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	<div id="box_3a" class="child-box"></div>
	----------------------------
	<div id="box_3b" class="child-box"></div>
	<div id="box_3b" class="child-box"></div>
	<div id="box_3b" class="child-box"></div>
	<div id="box_3b" class="child-box"></div>
	<div id="box_3c" class="child-box"></div>
	<div id="box_3d" class="child-box"></div>
	</div>
	</body>
	</html>