Skip to content

Instantly share code, notes, and snippets.

@pfraces
Last active August 29, 2015 14:10
Show Gist options
  • Save pfraces/55c27242e3b723ad35fe to your computer and use it in GitHub Desktop.
Save pfraces/55c27242e3b723ad35fe to your computer and use it in GitHub Desktop.
page layout
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="view">
<div class="panel-left">
left
</div>
<div class="panel-right">
right
</div>
<div class="content">
<h1>title</h1>
<ul>
<script>
for (var i = 0; i < 100; i++) {
document.write('<li>item ' + i + '</li>');
}
</script>
</ul>
</div>
</div>
<div class="header">
header
</div>
<div class="footer">
footer
</div>
</body>
body {
padding: 0;
margin: 0;
}
.header, .footer {
z-index: 2;
position: fixed;
height: 50px;
left: 0;
right: 0;
background-color: #ccf;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.panel-left, .panel-right {
z-index: 1;
position: fixed;
width: 200px;
top: 50px;
bottom: 50px;
background-color: #cfc;
}
.panel-left {
left: 0;
}
.panel-right {
right: 0;
}
.view {
/* position: fixed; disables global scroll */
/* top: 50px; requires position fixed to work */
/* bottom: 50px; requires position fixed to work */
margin-top: 50px; /* top replacement */
margin-bottom: 50px; /* bottom replacement */
overflow-x: hidden; /* avoid horizontal scroll */
}
.content {
margin: auto; /* align center */
width: 400px; /* width/min-width/max-width prevents content to be wrapped */
padding: 1px; /* break margin collapse */
background-color: #fcc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment