Skip to content

Instantly share code, notes, and snippets.

@trshafer

trshafer/demo.html

Created November 9, 2012 01:43
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 trshafer/4043193 to your computer and use it in GitHub Desktop.
Save trshafer/4043193 to your computer and use it in GitHub Desktop.
Download ZIP
Center column filling the height of either the left or right sides
Raw
demo.html
<html>
<head>
<title>Middle height</title>
<style type="text/css">
/*Positioning CSS*/
.container{
overflow: hidden;
position: relative;
}
.filler{
z-index: 0;
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.mid{
pointer-events: visible;
height: 100%;
}
/*Accessibility CSS*/
.container{
width: 300px;
}
.left{
background-color: red;
width: 100px;
}
.right{
width: 100px;
background-color: green;
}
.mid{
width: 100px;
margin-left: 100px;
background-color: purple;
}
</style>
</head>
<body>
<h2>Here the center column expands to fill the size of the right content</h2>
<div class="container">
<div class="left">
<a href="http://www.google.com">A link I can click</a>
left
</div>
<div class="filler">
<div class="mid">
<a href="http://www.google.com">A link I can click</a>
mid
</div>
</div>
<div class="right" style="height: 300px">
<a href="http://www.google.com">A link I can click</a>
right
</div>
</div>
<hr/>
<h2>Here the center column expands to fill the size of the left content</h2>
<div class="container">
<div class="left" style="height: 300px">
left
</div>
<div class="filler">
<div class="mid">
mid
</div>
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment