CSS Columns Table like - html

Question

Back in the day, when tables were used to layout content setting up a column type of layout was easy.I.e <table><tr><td>column 1</td><td>Column2</td></table>
I'm trying to do the same thing using CSS (with Divs etc..), however, I'm having difficulties trying to keep the two columns with the same size. Here's an example of what I'm talking about: http://www.jsfiddle.net/ybYJ9/
What I'm trying to do is have the column on the left (marked in blue) have the same size as the column on the right. The height of the column of the right will grow depending on content size, so I can't fix the size. I've tried to set the column height to be 100% and it isn't working if you can help with this it would be great.
Thanks

Answer 1

The best way is to use something like this.
Use jQuery (or similar scripting language) to detect the height of your main div and transfer the value to your other div :)

Answer 2

Most commonly used method is "Faux Columns".
You can apply a background image/color of a shorter column to an overall container. Container will strech to higher column, so it'll look like they're having same height.
Second way is background that'll look like both columns, and you'll repeat it vertically. It'll work great if u dont know which column will be higher.

Answer 3

At the moment there isn't a clear and safe way of doing this in CSS.
You might:
Use faux columns – if the design permits you
Use display: table, display: table-row and display: table-cell, effectively renderings semantic markup as a table. Here's some details about this, but be wary, it doesn't work in
Use JS to set equal heights to the columns. You can do this manually (comparing the height of each column, and setting each column's height to be that of the tallest), or simpler via a jquery plugin.
If you rely on JS, be careful of dynamic height changes, as you will have to update the previously set height declarations.

Answer 4

There are lots of ways to do it, and none of them are 100% satisfactory to me. Rebelek's answer is a good one, but my favourite method is with a jQuery plugin.
(function ($) {
$.fn.equalColumnHeights = function () {
equalise = function (element) {
var maxHeight = 0;
$(element).children().each(function() {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(element).children().height(maxHeight);
};
return this.each(function () {
equalise(this);
var element = this;
$(window).resize(function () {
$(element).children().height('');
equalise(element);
});
});
};
}(jQuery));
Then in your example:
jQuery(function ($) {
$('#mainBody').equalColumnHeights();
});
Example here: http://www.jsfiddle.net/nathan/ybYJ9/9/ I haven't changed anything except for adding the above JavaScript. That's why I like this method: completely non-intrusive.

Answer 5

You can't set the two different div elements the same non-fixed height without using the JS.
However, you can try to emulate the table behavior with the CSS display property.
Look over these 3 properties:
display: table;
display: table-row;
display: table-cell;
Set the display: table for your outer div (which will act like HTML <table> tag)
For your rows use display: table-row and for table cells use display: table-cell
You will have something like this:
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
1 cell
</div>
<div style="display: table-cell;">
2 cell
</div>
</div>
</div>
But please be careful since not all browsers handle these properties correctly.
Hope it helps.