Skip to content

Instantly share code, notes, and snippets.

@danieleli

danieleli/border-test.css

Created November 16, 2011 19:44
Show Gist options
  • Save danieleli/1371112 to your computer and use it in GitHub Desktop.
Save danieleli/1371112 to your computer and use it in GitHub Desktop.
Download ZIP
Vertical borders for variable height, centered content
Raw
border-test.css
body{ margin: 0; position: relative; }
.page-width { width: 960px; margin: 0 auto; }
/* BEGIN: side borders */
#border-wrapper {
z-index: 100;
position: absolute;
width: 100%;
height: 100%;
pointer-events:none; /* pass mouse event to layer below */
}
/* improvised gradient */
#border-wrapper > div { border-color: rgba(0,0,0,.05); }
#border-wrapper > div > div{ border-color: rgba(0,0,0,.15); }
#border-wrapper > div > div > div{ border-color: rgba(0,0,0,.3); }
#border-wrapper div {
border-width: 0 1px;
border-style: solid;
height: 100%;
}
/* END: side borders */
/* BEGIN: content */
#content { color: #006363; }
#content > section { /* full browser width */ }
#content > section > * {
padding: 0 5px; /* gutter */
width: 950px !important; /* page width minus gutter */
margin: 0 auto; /* center */
}
/* Margins can introduce white space at top and bottom of page. */
#content > section > * > * { margin: 0 auto; }
/* END: content */
/* BEGIN: content sections */
.top-section { background: #ff7373; }
.middle-section { background: #5CCCCC; min-height: 100px; }
.bottom-section { background: #C9F76F; }
/* END: content sections */
Raw
border-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Daniel Schlossberg">
<!-- Date: 2011-11-16 -->
<link rel="stylesheet" href="border-test.css" type="text/css" />
</head>
<body>
<div id="border-wrapper" >
<div class="page-width">
<div>
<div></div>
</div>
</div>
</div>
<div id="content">
<!- #content:section -->
<section class="top-section">
<!- #content:section:* -->
<div>
<!- #content:section:*:* { margin: 0; } margins
can introduce whitespace at top of page -->
<h1>Some title</h1>
<div>line2</div>
</div>
</section>
<section class="middle-section">
<div>body</div>
</section>
<section class="bottom-section">
<div>footer</div>
</section>
</div>
</body>
</html>
Raw
border-test.scss
body { margin: 0; position: relative; }
.page-width { width: 960px; margin: 0 auto; }
/* Side Borders */
#border-wrapper {
z-index: 100;
position: absolute;
width: 100%;
height: 100%;
> div { border-color: rgba(0, 0, 0, 0.05);
> div { border-color: rgba(0, 0, 0, 0.15);
> div { border-color: rgba(0, 0, 0, 0.3); } } }
div {
border-width: 0 1px;
border-style: solid;
height: 100%; } }
/* CONTENT */
#content { color: #006363;
> section { /* this element is full browser width */
> * {
width: 950px !important; /* the centered page width minus gutter */
padding: 0 5px; /* gutter */
margin: 0 auto; /* center */
> * { margin: 0 auto; } /* Margins can introduce white space at top and bottom of page. */ } } } }
/* Content Sections */
.top-section { background: #ff7373; }
.middle-section { background: #5CCCCC; min-height: 100px; }
.bottom-section { background: #C9F76F; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment