JavaScript code is extremely flexible and can be applied to any variation of this design.
The code will stay mostly the same, with the exception of an added class in the CSS and HTML. JavaScript interacts with websites based on div classes.
So add a class called .container to the CSS, and add the container class to each of your columns in the HTML. You can style the class or leave it empty.
Now, add this JavaScript to your HTML:
<script language="javascript">
matchHeight=function(){
var divs,contDivs,maxHeight,divHeight,d;
// get all <div> elements in the document
divs=document.getElementsByTagName('div');
contDivs=[];
// initialize maximum height value
maxHeight=0;
// iterate over all <div> elements in the document
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute 'container'
if(/\bcontainer\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for <div> element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container <div> elements
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight;
}
}
// execute function when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchHeight();
}
}
</script>
To explain how the JavaScript works:
The JavaScript function first grabs all the div elements in the HTML. Then an array stores all of the div elements that are classed with .container.
The maxHeight variable grabs the maximum height for those divs. You don't have to specify this anywhere, it just calculates the height of each div and grabs the height of the tallest column.
The JavaScript then applies that maximum height and applies it to all the .container classed divs, resulting in all the columns being the same height, regardless of content.
JavaScript is a simple solution to the problems that cause columns to exist at different heights.
Beware, if users have disabled JavaScript in their browsers, the function will not run, and the columns will appear as they would without the script. If this is a concern for you, you may have to look for another solution.