Skip to content

Instantly share code, notes, and snippets.

@msweeney

msweeney/yui3 grids - equal height

Created August 4, 2010 07:45
Show Gist options
  • Save msweeney/507800 to your computer and use it in GitHub Desktop.
Save msweeney/507800 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
yui3 grids - equal height
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&3.1.1/build/cssreset/reset-min.css&3.2.0pr1/build/cssgrids/grids-min.css">
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>
<style>
.yui3-u-1-3 {
height: 100%; /* snap to height of grid */
}
.module {
background: #ccc;
border: 1px solid #999;
height: 99%; /* adjust to accomodate border + padding */
}
</style>
</head>
<body>
<div class="yui3-g">
<div class="yui3-u-1-3">
<div class="module">
<h2>Header</h2>
<p>lorem ipsum dolor sit.</p>
<p>lorem ipsum dolor sit.</p>
</div>
</div>
<div class="yui3-u-1-3">
<div class="module">
<h2>Header</h2>
<p>lorem ipsum dolor sit.</p>
<p>lorem ipsum dolor sit.</p>
<p>lorem ipsum dolor sit.</p>
</div>
</div>
<div class="yui3-u-1-3">
<div class="module">
<h2>Header</h2>
<p>lorem ipsum dolor sit.</p>
</div>
</div>
</div>
<script>
YUI().use('node', function(Y) {
Y.all('div.yui3-g').each(function(node) {
node.setStyle('height', node.get('offsetHeight') + 'px');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment