Skip to content

Instantly share code, notes, and snippets.

@Igneous
Created January 13, 2011 01:02
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 Igneous/777223 to your computer and use it in GitHub Desktop.
Save Igneous/777223 to your computer and use it in GitHub Desktop.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 90%; height: 90%; border: 1px solid gray; margin-left: auto; margin-right: auto; text-align:center;-moz-box-shadow: 5px 5px 3px #222;-webkit-box-shadow: 5px 5px 3px #222;box-shadow: 5px 5px 3px #222;}
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0" style="background:url(http://ompldr.org/vNnlyYg/stripe_c374fd590925dfcd2c6aeba000074512.png);">
<tr><td id="middle">
<div id="centered">
<div style="background-color:#bbbbff;height: 10%;">
Header
</div>
<div style="background-color:#BDE2FF;height:85%;width:160px;float:left;">
Left menu<br />
Item 1<br />
Item 2<br />
Item 3...
</div>
<div style="background-color:#eeeeee;height:85%;">
Main body
</div>
<div style="background-color:#bbbbff;height: 5%;clear:both">
Footer
</div>
</div>
</td></tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment