DIV Variable Height Columns, but matching height

HTML & CSS
1

Hi Guys. Need a little help with variable height divs laid out as columns.

The basic code I have is below, Im used to table layouts but slowly trying to get to grips with DIVs, with a table layout this would be simple.

I have a container div, with two column divs inside. They are variable height depending on the content. The result im after is for both columns to be the same height depending on which one has more content, ie is the left column has more content than the right the right will match the left columns height and vice-versa.

Is this even possible using divs & css? Just to clarify both columns should be the same height as each other (depending on which has more content), I dont want them to be bigger than required and as the content comes from a database I don’t want to fix the heights.

Thanks in advance
James

<div class="columns">
<div class="column left">VARIABLE HEIGHT CONTENT<br>row2</div>
<div class="column right">VARIABLE HEIGHT CONTENT<br>row2<br>row3</div>
<div style="clear:both;"></div>
</div>

.columns{
width:100%;
height:100%;
clear:both;
border: 1px #000000 solid;
clear: both;
}
.column.left{
float:left;
clear:none;
width:49.5%;
height:100%;
border: 1px red solid;
background-color: green;
}
.column.right{
float:right;
clear:none;
width:49.5%;
height:100%;
border: 1px blue solid;
background-color: yellow;
}
2

There are various ways to do this. One is to have “faux columns”, where you have a background image that fills the height of the container an gives the visual appearance of columns.

Or you can just do this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>equal cols</title>
	
<style media="all">
.columns {
  width:100%;
  display: table;
}

.column {
  display: table-cell;
  width:49.5%;
  border: 1px red solid;
}

.left {
  background-color: green;
}

.right{
  background-color: yellow;
}
</style>

</head>
<body>

<div class="columns">
  <div class="column left">VARIABLE HEIGHT CONTENT<br>row2</div>
  <div class="column right">VARIABLE HEIGHT CONTENT<br>row2<br>row3</div>
</div>

</body>
</html>

You can find lots more ingenious ways to do equal height cols on Pau O’Brien’s site, such as this:

http://www.pmob.co.uk/pob/equal-columns.htm