mbrowne/stack.css

## stack.css
.box {padding:10px;}
.box, .stack-item:first-child .box {border:1px solid #ccc;}
.stack-item .box {border-top:none}

.stack {margin:0;padding:0;}
ul.stack {list-style:none;}
/*Note: if setting a min-height for items, set it on .stack-item .box, not on .stack-item,
otherwise .box won't expand to the full height*/
.stack-item .box {height:100%;
-moz-box-sizing: border-box; -ms-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}

/* if more divisions are added, remember to update stack_ie7.css too */
.height1of2{height:50%;}
.height1of3{height:33.33333%;}
.height2of3{height:66.66666%;}
.height1of4{height:25%;}
.height3of4{height:75%;}
.height1of5{height:20%;}
.height2of5{height:40%;}
.height3of5{height:60%;}
.height4of5{height:80%;}

## stack.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stack</title>
<link rel="stylesheet" href="stack.css">
<style>
#example2 {height:200px;}
#example3 .stack-item .box {min-height:100px;}
</style>
<!--[if lte IE 7]>
<link rel="stylesheet" href="stack_ie7.css">
<![endif]-->
</head>
<body>

<h3>Example 1 - Auto height</h3>

<ul class="stack" id="example1">
  <li class="stack-item">
		<div class="box">Stack item 1</div>
	</li>
	<li class="stack-item">
		<div class="box">Stack item 2</div>
	</li>
	<li class="stack-item">
		<div class="box">Stack item 3</div>
	</li>
	<li class="stack-item">
		<div class="box">Stack item 4</div>
	</li>
</ul>

<h3>Example 2 - Percentage height for items (fixed height for container)</h3>

<ul class="stack" id="example2">
	<li class="stack-item height2of3">
		<div class="box">2/3 height</div>
	</li>
	<li class="stack-item height1of3">
		<div class="box">1/3 height</div>
	</li>
</ul>

<h3>Example 3 - min-height on items</h3>

<ul class="stack" id="example3">
	<li class="stack-item">
		<div class="box">Stack item 1</div>
	</li>
	<li class="stack-item">
		<div class="box">Stack item 2</div>
	</li>
	<li class="stack-item">
		<div class="box">Stack item 3</div>
	</li>
	<li class="stack-item">
		<div class="box">Stack item 4</div>
	</li>
</ul>

</body>
</html>

## stack_ie7.css
.stack-item {position:relative;
vertical-align:top; /* fixes an IE relative/absolute positioning bug involving LI elements */
}
.height1of2 .box,.height1of3 .box,.height2of3 .box,.height1of4 .box,.height3of4 .box, .height1of5 .box, .height2of5 .box, .height3of5 .box, .height4of5 .box {
position:absolute;top:0;right:0;left:0;bottom:0;
height:auto;
_width:100%; /*for IE6*/
}
	.box {padding:10px;}
	.box, .stack-item:first-child .box {border:1px solid #ccc;}
	.stack-item .box {border-top:none}

	.stack {margin:0;padding:0;}
	ul.stack {list-style:none;}
	/*Note: if setting a min-height for items, set it on .stack-item .box, not on .stack-item,
	otherwise .box won't expand to the full height*/
	.stack-item .box {height:100%;
	-moz-box-sizing: border-box; -ms-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
	}

	/* if more divisions are added, remember to update stack_ie7.css too */
	.height1of2{height:50%;}
	.height1of3{height:33.33333%;}
	.height2of3{height:66.66666%;}
	.height1of4{height:25%;}
	.height3of4{height:75%;}
	.height1of5{height:20%;}
	.height2of5{height:40%;}
	.height3of5{height:60%;}
	.height4of5{height:80%;}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Stack</title>
	<link rel="stylesheet" href="stack.css">
	<style>
	#example2 {height:200px;}
	#example3 .stack-item .box {min-height:100px;}
	</style>
	<!--[if lte IE 7]>
	<link rel="stylesheet" href="stack_ie7.css">
	<![endif]-->
	</head>
	<body>

	<h3>Example 1 - Auto height</h3>

	<ul class="stack" id="example1">
	<li class="stack-item">
	<div class="box">Stack item 1</div>
	</li>
	<li class="stack-item">
	<div class="box">Stack item 2</div>
	</li>
	<li class="stack-item">
	<div class="box">Stack item 3</div>
	</li>
	<li class="stack-item">
	<div class="box">Stack item 4</div>
	</li>
	</ul>

	<h3>Example 2 - Percentage height for items (fixed height for container)</h3>

	<ul class="stack" id="example2">
	<li class="stack-item height2of3">
	<div class="box">2/3 height</div>
	</li>
	<li class="stack-item height1of3">
	<div class="box">1/3 height</div>
	</li>
	</ul>

	<h3>Example 3 - min-height on items</h3>

	<ul class="stack" id="example3">
	<li class="stack-item">
	<div class="box">Stack item 1</div>
	</li>
	<li class="stack-item">
	<div class="box">Stack item 2</div>
	</li>
	<li class="stack-item">
	<div class="box">Stack item 3</div>
	</li>
	<li class="stack-item">
	<div class="box">Stack item 4</div>
	</li>
	</ul>

	</body>
	</html>
	.stack-item {position:relative;
	vertical-align:top; /* fixes an IE relative/absolute positioning bug involving LI elements */
	}
	.height1of2 .box,.height1of3 .box,.height2of3 .box,.height1of4 .box,.height3of4 .box, .height1of5 .box, .height2of5 .box, .height3of5 .box, .height4of5 .box {
	position:absolute;top:0;right:0;left:0;bottom:0;
	height:auto;
	_width:100%; /for IE6/
	}