Skip to content

Instantly share code, notes, and snippets.

@mbrowne

mbrowne/stack.css

Last active December 16, 2015 03:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbrowne/5373439 to your computer and use it in GitHub Desktop.
Save mbrowne/5373439 to your computer and use it in GitHub Desktop.
Download ZIP
CSS stack class (for stacking items vertically, optionally specifying percentage-based heights)
Raw
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%;}
Raw
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>
Raw
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*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment