Skip to content

Instantly share code, notes, and snippets.

@tatygrassini

tatygrassini/CSS_wrapper_hack.html

Last active December 11, 2015 04:58
Show Gist options
  • Save tatygrassini/4548915 to your computer and use it in GitHub Desktop.
Save tatygrassini/4548915 to your computer and use it in GitHub Desktop.
Download ZIP
CSS hack for markup wrappers
Raw
CSS_wrapper_hack.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hacking wrappers</title>
<style>
/* normalize CDN, test it on a server or add http: to the import */
@import "//cdnjs.cloudflare.com/ajax/libs/normalize/2.0.1/normalize.css";
body {
/* no horizontal scrolling... */
overflow-x: hidden; /* for ALL */
_width: 100%; /* for IE6 */
}
section {
width: 500px; /* your design width */
margin-left: -250px; /* 1/2 width in negative */
padding-left: 50%; /* let the padding do the rest */
padding-right: 50%;
content:" "; display:table; clear:both; *zoom:1;
background: #CCC;
}
section:nth-child(2) {background: #BBB;}
section:nth-child(3) {background: #AAA;}
</style>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section class="cf">
<!-- Nah, no need for wrappers here... -->
<h1>Hacking wrappers</h1>
</section>
<section>
<p>Just a simple little hack to avoid an extra container div in the markup.
Inspired by <a href="http://lea.verou.me/">Lea Verou</a>'s presentation
"Another 10 Things You May Not Know About CSS"
(the CSS <code>calc</code> trick).
See the <a href="http://codepen.io/tatygrassini/full/CowAs">Demo</a>.</p>
</section>
<section>
<p>Support: Firefox 3, Safari 3, IE6.</p>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment