Created
June 30, 2011 20:43
-
-
Save rmasters/1057189 to your computer and use it in GitHub Desktop.
Blueprint CSS rules to achieve equal-height columns.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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