Skip to content

Instantly share code, notes, and snippets.

@sytelus

sytelus/jsbin.maxaqoto.html

Created April 28, 2014 07:41
Show Gist options
  • Save sytelus/11364497 to your computer and use it in GitHub Desktop.
Save sytelus/11364497 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment