Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/index.html

Created August 1, 2014 19:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clhenrick/c7a9bff1569113d14b27 to your computer and use it in GitHub Desktop.
Save clhenrick/c7a9bff1569113d14b27 to your computer and use it in GitHub Desktop.
Download ZIP
mfa dt bootcamp web class css positioning example 7: using absolute positioning to make a two column layout
Raw
index.html
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: http://alistapart.com/article/css-positioning-101
-->
<html>
<head>
<meta charset="utf-8">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Example H</title>
<style>
h1, h3 {
text-align: center;
z-index: 10;
}
div {
z-index: -9;
}
#box_1 {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 80%;
background: #b7d84b; }
</style>
</head>
<body>
<h1>Two boxes positioned absolutely to create a two column layout</h1>
<h3>Left box has right: 20% and top, bottom, left: 0</h3>
<h3>Right box has left: 80% and top, right, bottom: 0</h3>
<div id="box_1"></div>
<div id="box_2"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment