Skip to content

Instantly share code, notes, and snippets.

@antoster

antoster/table-holy-grail.css

Last active August 29, 2015 14:08
Show Gist options
  • Save antoster/de7cecde1acb69eabcef to your computer and use it in GitHub Desktop.
Save antoster/de7cecde1acb69eabcef to your computer and use it in GitHub Desktop.
Download ZIP
Table holy grail layout // source http://jsbin.com/yegelexavi
Raw
table-holy-grail.css
html,
body {
height: 100%;
}
body {
background: #fffad5;
color: black;
}
.wrapper {
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header {
display: table-row;
height: 1px;
background: #ffd34e;
}
.main {
height: 100%;
display: table;
width: 100%;
}
.box {
display: table-cell;
}
.sidebar {
width: 100px;
background: #bd4932;
}
.footer {
display: table-row;
height: 1px;
background: #105b63;
color: #fffad5;
}
/* Additional stuff */
* {
margin: 0;
padding: 0;
}
Raw
table-holy-grail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="header">HEADER</div>
<div class="main">
<div class="box sidebar">Left-sidebar</div>
<div class="box content">Main Content</div>
<div class="box sidebar">Right-sidebar</div>
</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment