Two column layout: table or CSS?

Question

I'm making a site with two columns. Either of the columns can be larger than the other and they have different backgrounds. My problem in trying to do it with CSS with the clearfix trick, is that colors are right when the color of the underlying wrapper has the color of the shorter column, but when it has the color of the larger column, the design changes visually. Maybe I'm doing it wrong.

I've achieved what I want, but with tables. I've asked a friend that makes websites and he told me that tables shouldn't be used for design and that tables are for cavemen. The funny thing is that he couldn't achieve what I want either.

Well, this is basically my HTML code:

<div class="float_container clearfix">
   <div class="column1">
      Column 1 content
   </div>

   <div class="column2">
      Column 2 content
   </div>
</div>

This is my CSS:

.column1 {
float: left;
width: 200px;
background-color:red;
}

.column2 {
float: left;
width: 390px;
height: 1%;
background-color:blue;
}

Answer 1

It's a basic question... there are may posts about this out there and many solutions.

Here are a few of them: http://www.ejeliot.com/blog/61

The easiest (not exactly recommended) is to use jQuery.

<script>
     $('. float_container').equalHeights();
</script>

Answer 2

Go for the basic css implementation. Will be much better for maintenance.

Answer 3

Tables are for tabular data, not layout. Stick with your DIVs and CSS for layout.

You could simply apply the coloured background (of both columns) to the float_container (faux columns) instead of .column1 and .column2. It will then 'look' as if both columns are the same height - the height of the tallest column. This is assuming both columns are of fixed width.

The coloured background of the float_container would be an image (perhaps even just 1px high) that is repeated vertically and contains the colour of each column.