Well i’ve been looking around on Google for what seems like all-day and I haven’t really come across any solutions to this problem other than involving JQuery (which frankly seems unnecessary!), CSS hacks or stuff which involves images.
So, basically I want a CSS-only solution which gives equal heights for columns whether they’re 2, 3 or even 10 columns. I came across the following which works but to be honest just looks like another CSS hack. Is there a particular reason why this is so difficult? lol
I’ve tried using a height of 100% on columns but that seems to set the height to 1200px high - why does it just stop there? :S (please see the code below)
<style type="text/css">
#header {
padding:5px 10px;
background:#ddd;
}
#nav {
padding:5px 10px;
background:#cccccc;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#container{background:black;}
#main {
float:left;
width:45.3%;
padding:10px;
background:#0066CD;
}
#leftbar {
float:left;
width:25%;
height:100%;
padding:8px;
background:#23297A;
}
#rightbar {
float:right;
width:25%;
height:100%;
padding:8px;
background:#23297A;
}
#footer {
clear:both;
padding:5px 10px;
background:#cccccc;
}
#footer p {
margin:0;
}
h1 {
margin:0;
}
h2 {
margin:0 0 1em;
}
</style>
<div id="container">
<div id="header"><h1>Main Heading</h1></div>
<div id="nav">
Navigation
</div>
<div id="leftbar">
<h2>Left</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="main">
<h2>Middle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ligula enim, egestas pellentesque laoreet a, sagittis ac ante. Suspendisse auctor purus sit amet velit dapibus vel iaculis mi fringilla. Nulla facilisi. Morbi placerat massa sit amet elit sagittis in ultrices dui facilisis. Quisque nec velit leo, sit amet varius mi. Proin scelerisque posuere massa nec bibendum. Aenean nibh nisl, venenatis quis lobortis eget, molestie non dolor. Ut rhoncus arcu id sem iaculis iaculis. In auctor condimentum quam sit amet commodo. Aliquam ipsum risus, rhoncus vel suscipit non, rutrum eget lorem. Pellentesque ut laoreet quam. Praesent purus nulla, sodales eget mollis ac, tempor nec dui.
Donec ut eros ac ipsum facilisis congue. Vestibulum tincidunt, sapien quis ultrices viverra, nibh felis cursus orci, nec sodales nisl mauris sit amet nisi. Nam venenatis posuere massa. Integer eget bibendum metus. Vestibulum ultrices, libero in porta imperdiet, neque elit accumsan odio, nec blandit justo nulla et dolor. Etiam eu nibh eget tellus porta laoreet et eu arcu. Fusce volutpat urna ac sem aliquet vehicula ornare nunc volutpat. Ut porttitor condimentum dui, sit amet hendrerit ante luctus non. Fusce commodo enim at ligula iaculis sollicitudin et vel urna. Morbi pharetra ullamcorper pulvinar. Suspendisse ligula felis, interdum ut sagittis vitae, auctor eget erat. Aenean porta ultrices tellus, sit amet cursus tortor hendrerit non. In lobortis cursus interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div id="rightbar">
<h2>Right</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
Equal height columns aren’t necessarily hard, but the easiest way isn’t for everyone.
For example, they are incredibly “fluid”, but not cross-browser friendly with older browsers; and, of course, they are not responsive.
Ultimately, it depends on your needs… your target audience of users.
Easy Equal Height Columns, 2 or 10 (IE8+):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1001492-Equal-Column-Heights-Pure-CSS
Thread: Equal Column Heights - Pure CSS
2013.03.14 15:21
Shoxt3r
-->
<head>
<title>A Row of Columns</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
.table {
display:table;
table-layout:fixed;
width:100%;
background-color:#dcb;
border:4px solid #cba;
margin-left:-4px;
}
.tcell {
display:table-cell;
background-color:#fed;
padding:0px 8px;
}
.tcell + .tcell {
border-left:1px dashed #cba;
}
p {
margin:.5em 0;
}
</style>
</head>
<body>
<div class="table">
<div class="tcell">
<p>A column of content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo.</p>
</div>
<div class="tcell">
<p>A column of content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="tcell">
<p>A column of content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae faucibus felis. Vivamus at metus eget eros consequat fringilla.</p>
</div>
<div class="tcell">
<p>A column of content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo.</p>
</div>
</div>
</body>
</html>
Just a note: The inner divs don’t have to be classed. The following technique styles them without assinging them a class:
Just a note: The inner divs don’t have to be classed.
If you are not going to use classes for the DIVs I HIGHLY recommend the CHILD selector.
.table>div {
display:table-cell;
...
}
other wise all descendant DIVs will be table cells. That’s not what you want.
Also note that aside from lack of older IE support, this method also eliminate the possibility of using AP for child elements of the cloumns ( yeah, a frivolity, but I like it).
you can also do equal heights this way, note each column will require an extra wrapper ans some math:
That’s a interesting way Dresden. I think I would prob have some issues using that in the wild as its a bit complicated. On the iPad there is a rounding error of 2px on the left column.
I did a cool trick on my site in my sig. That main div is a faux column. I realized I needed it after the fact. So I just did #wrap:before to hold the faux column. Very easy way.
Don’t use that method as it kills any in-page links in the page. That means you can’t use fragment identifiers in the page because the content will scroll and be unreachable and unusable. It’s ok to use for small boxes in a row but not for anything that holds real content. That technique was taken from the “one true layout” example on “list apart” which mentions the bug and why its not really a viable solution.
So I’m playing with this. I dont see how this is any different than just giving three divs a height of 500px. Your code says .col+.col+.col{ height:500px;}. How is that equal height columns? As expected adding more text makes it all fall apart past 500px.
And I’m playing with this one. Am I missing something? You have to set a fixed height on the wrap to hide the overflow. So how is it any better than just giving two divs equal heights? And I could not recreate the link problem
The overflow:hidden cuts off the extended background and allows the equal column effect.
It’s a badly flawed approach though as can be seen by clicking the link in this example:
So I’m playing with this. I dont see how this is any different than just giving three divs a height of 500px. Your code says .col+.col+.col{ height:500px;}. How is that equal height columns? As expected adding more text makes it all fall apart past 500px.
Eric, that was put there as a place holder height, nothing more; oin the wild you’d just remove the height as it’s bad practice to set height on elements with content. so while developing the CSS I targeted the last div to serve as the TALL column while I fine tuned the code, w/o having to resort to typing lorem ipsum. in retrospect, i should have used min-height, as that would have still worked even you forgot to remove that vestigial declaration.
(IE8+):