1 files changed, 125 insertions, 0 deletions
diff --git a/legacy/works/float-based-layout.html b/legacy/works/float-based-layout.html
new file mode 100644
index 0000000..3e5b2e1
--- /dev/null
+++ b/legacy/works/float-based-layout.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<style>	
+.container {
+	width: 770px;
+	}
+
+.column {
+	float: left;
+	}
+
+.leftCol {
+	width: 203px;
+	}
+
+.mainCol {
+	margin: 0 4px 0 218px;
+	width: 366px;
+	}
+
+.rightCol {
+	width: 181px;
+	}
+	
+.threeCol .leftCol {
+	margin-left: -588px;
+	}
+</style>
+</head>
+
+<body>
+
+
+
+<div style="background:#fcc;">The three columns are floated left. Using a big negative margin, the middle one appears on the left hand side. When the right column is positioned, it should be positioned next to the furthest float across the page, not next to the previous float.</div>
+
+
+
+<div class="container">
+	<div class="threeCol">
+		<div class="column mainCol">
+		Blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		blah blah blah blah blah blah blah blah blah blah blah blah
+		</div>
+		<div class="column leftCol">
+		Left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		left left left left left left left left left left left left
+		</div>
+		<div class="column rightCol">
+		Right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		right right right right right right right right right right
+		</div>
+	</div>
+	<div class="footer">
+	Footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	footer footer footer footer footer footer footer footer footer
+	</div>
+</div>
+</body>
+</html>
+\ No newline at end of file