Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/index.css

Created January 9, 2012 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save abernier/1583644 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save abernier/1583644 to your computer and use it in GitHub Desktop.
Download ZIP
micro-clearfix
Raw
index.css
/*
* µclearfix
*
* Credits: http://nicolasgallagher.com/micro-clearfix-hack/
*/
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
Raw
index.html
<!DOCTYPE html>
<meta charset=utf-8>
<title>µclearfix</title>
<link rel="stylesheet" href="index.css">
<style>
#test {background-color:hotpink; padding:1em;}
#test > * {width:5em; line-height:5em; background-color:rgba(255,255,255,.5);}
#test > *:first-child {float:left;}
#test > *:last-child {float:right;}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget mauris elit, vitae elementum felis. Nulla lobortis nisl id erat suscipit congue. Vestibulum tellus eros, ultricies ac luctus et, fringilla a ipsum. Vestibulum quis nunc consectetur erat condimentum tincidunt.</p>
<div id="test" class="cf">
<div>A</div>
<div>B</div>
</div>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eleifend tristique lacus sed hendrerit. Sed turpis libero, dictum at adipiscing vel, consequat scelerisque libero. Morbi malesuada vehicula augue, id luctus dui consectetur id.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment