Skip to content

Instantly share code, notes, and snippets.

@mark47

mark47/Equal column height

Created December 23, 2013 19:23
Show Gist options
  • Save mark47/8103040 to your computer and use it in GitHub Desktop.
Save mark47/8103040 to your computer and use it in GitHub Desktop.
Download ZIP
Make equal height columns via adding .col-wrap with overflow:hidden
Raw
Equal column height
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>SO equal height columns</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<style type='text/css'>
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}
.col-wrap{
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid col-wrap">
<div class="span4 col">
<p>left column </p>
<p><A href="#gogo">left column</A></p>
<p>left column </p>
</div><!-- end span 4-->
<div class="span4 col">
<p>middle column</p>
<div style="height: 400px">a</div>
<p>middle column</p>
<div style="height: 400px">a</div>
<p>middle column</p>
<div style="height: 400px">a</div>
<p id="gogo">gogo - middle column</p>
<div style="height: 400px">a</div>
<p>middle column</p>
<div style="height: 400px">a</div>
<p>middle column</p>
</div><!--end span4-->
<div class="span4 col">
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
</div><!-- end span 4-->
</div><!-- end row-fluid -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment