seantimm/content.html

## content.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Static Positioning</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="div1">div1
  <div id="div1a">div1a</div>
  <div id="div1b">div1b</div>
</div>

<!-- Code below is to toggle source and load scripts -->
<button id="source">Toggle Source</button>
<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<script src="https://gist.github.com/2156128.js" type="text/javascript"></script>
</body>
</html>

## script.js
$(function() {
  // Code to support toggling scripts
  $("#source").on("click", function(event) {
    $(".gist").toggle();
  });
});

## style.css
div#div1 {
  width: 100%;
  background-color: red;
  box-sizing: border-box;
  position: relative;
  padding: 0 1em 1em 1em;
  margin-bottom: 1em;
  line-height: 1;
}

div#div1a {
  background-color: blue;
  position: absolute;
  left: 1em;
  top: 1em;
  right: 50%;
  bottom: -1em;
}

div#div1b {
  background-color: black;
  position: absolute;
  left: 50%;
  top: 1em;
  right: 1em;
  bottom: -1em;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: white;
  font-family: sans-serif;
  text-align: center;
  box-sizing: border-box;
}

body {
  padding: 1em;
}

/* Styles to support toggling the source view */
.gist {
  font-size: 0.5em;
  display: none;
}

div.gist .gist-file {
  position: relative;
  margin: 3em 0;
}

.gist-meta {
  position: absolute;
  top: -2.5em;
  left: -30000px;
}

.gist-meta a {
  display: none;
}

.gist-meta a:nth-child(2) {
  position: relative;
  padding-left: 30000px;
  display: inline;
}

#source {
  float: right;
  clear: both;
}

body {
  font-size: 4em;
}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head><title>Static Positioning</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>

	<div id="div1">div1
	<div id="div1a">div1a</div>
	<div id="div1b">div1b</div>
	</div>

	<!-- Code below is to toggle source and load scripts -->
	<button id="source">Toggle Source</button>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="script.js" type="text/javascript"></script>
	<script src="https://gist.github.com/2156128.js" type="text/javascript"></script>
	</body>
	</html>
	$(function() {
	// Code to support toggling scripts
	$("#source").on("click", function(event) {
	$(".gist").toggle();
	});
	});
	div#div1 {
	width: 100%;
	background-color: red;
	box-sizing: border-box;
	position: relative;
	padding: 0 1em 1em 1em;
	margin-bottom: 1em;
	line-height: 1;
	}

	div#div1a {
	background-color: blue;
	position: absolute;
	left: 1em;
	top: 1em;
	right: 50%;
	bottom: -1em;
	}

	div#div1b {
	background-color: black;
	position: absolute;
	left: 50%;
	top: 1em;
	right: 1em;
	bottom: -1em;
	}

	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: white;
	font-family: sans-serif;
	text-align: center;
	box-sizing: border-box;
	}

	body {
	padding: 1em;
	}

	/* Styles to support toggling the source view */
	.gist {
	font-size: 0.5em;
	display: none;
	}

	div.gist .gist-file {
	position: relative;
	margin: 3em 0;
	}

	.gist-meta {
	position: absolute;
	top: -2.5em;
	left: -30000px;
	}

	.gist-meta a {
	display: none;
	}

	.gist-meta a:nth-child(2) {
	position: relative;
	padding-left: 30000px;
	display: inline;
	}

	#source {
	float: right;
	clear: both;
	}

	body {
	font-size: 4em;
	}