Skip to content

Instantly share code, notes, and snippets.

@Igneous
Created January 13, 2011 00:50
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/777196 to your computer and use it in GitHub Desktop.
Save Igneous/777196 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;}
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<div style="background:url(http://ompldr.org/vNnlxaw); 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="height: 5%;background:url(http://ompldr.org/vNnlxaw);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