Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blueprint CSS rules to achieve equal-height columns.
/**
* A couple of CSS rules to achieve equal-height columns in Blueprint CSS
*/
/* Apply to the sub-grid container */
.equalcolumns {
overflow: hidden;
}
/* Note column classes must start with their span-x attribute */
.equalcolumns *[class|="span"] {
/* Adjust values based on what you think their maximum height will be */
padding-bottom: 2000px;
margin-bottom: -2000px;
}
/* Usage:
<div class="container">
<!-- Sub-grid container -->
<div class="span-24 equalcolumns">
<div class="span-12 border">
<p>Left-hand column</p>
</div>
<div class="span-12 last">
<p>Watch</p>
<p>The</p>
<p>Border</p>
<p>Match</p>
<p>This</p>
<p>Column's</p>
<p>Height</p>
</div>
</div>
</div>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment