Skip to content

Instantly share code, notes, and snippets.

@ungoldman

ungoldman/float_this.html

Created February 24, 2012 00:16
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 ungoldman/1896025 to your computer and use it in GitHub Desktop.
Save ungoldman/1896025 to your computer and use it in GitHub Desktop.
Download ZIP
better clearfix hack (tutorial)
Raw
float_this.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
/* nicholas gallagher's tiny clearfix */
.group:before, .group:after { content: ""; display: table; }
.group:after { clear: both } .group { zoom: 1 }
/* style for explanation */
div {
background: rgba(0,0,255,.1);
}
p {
background: rgba(0,0,0,.1);
}
.floated-element {
background: rgba(255,0,0,.5);
float: left;
margin: 10px;
height: 50px;
width: 50px;
}
.group .floated-element {
background: rgba(0,255,0,.5);
}
.fixed-height {
height: 100px;
}
.fixed-height .floated-element {
background: rgba(225,225,0,.5);
}
</style>
<div class="group">
div.group
<p>block</p>
<div class="floated-element">float</div>
<div class="floated-element">float</div>
</div>
<p>block</p>
<div class="fixed-height">
div.fixed-height
<p>block</p>
<div class="floated-element">float</div>
<div class="floated-element">float</div>
</div>
<p>block</p>
<div>
div
<p>block</p>
<div class="floated-element">float</div>
<div class="floated-element">float</div>
</div>
<div>
div
<p>block</p>
<div class="floated-element">float</div>
<div class="floated-element">float</div>
</div>
<p>block</p>
</body>
</html>
​
@ungoldman
Copy link
Author

a web inspector
highlights elements and then
groks all the floating

demo: http://jsfiddle.net/kzrFX/4/
source of hack: http://nicolasgallagher.com/micro-clearfix-hack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment