Hi there,

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

http://mattkirman.com/2009/10/12/equ...with-pure-css/

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)

Code:
<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>
Cheers,

Shoxt3r