Skip to content

Instantly share code, notes, and snippets.

@willwright82
Last active June 27, 2016 11:39
Show Gist options
  • Save willwright82/ead9c6174d4ac7abb8b6 to your computer and use it in GitHub Desktop.
Save willwright82/ead9c6174d4ac7abb8b6 to your computer and use it in GitHub Desktop.
Same Height Columns (One True Method)
<div id="one-true" class="group">
<div class="col">
<h3>I am listed first in source order.</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<style>
#one-true {
overflow: hidden;
}
#one-true .col {
/*width: 27%;
padding: 30px 3.15% 0;
float: left;*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
/*#one-true .col:nth-child(1) {
margin-left: 33.3%;
background: #ccc;
}
#one-true .col:nth-child(2) {
margin-left: -66.3%;
background: #eee;
}
#one-true .col:nth-child(3) {
left: 0;
background: #eee;
}*/
/*#one-true p {
margin-bottom: 30px;
}*/
/* Bottom padding on col is busy */
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment