Dual Column Layout in CSS with dynamic height in IE

Question

I have a dual column layout using CSS:

<div id="nav"></div>
<div id="left_column"></div>
<div id="right_column"></div>
<div id="footer"></div>

#left_column{
    float: left;
    width: 463px;
    display: inline-block;
    margin-left: 12px;    
}

#right_column{
    float: right;
    width: 463px; 
    display: inline-block; 
    margin-right: 12px;
}

#footer{ 
  clear:both;
  text-align: center;
  padding: 40px;
}

This works fine in Firefox, but creates problems in IE. The main problem is that the content of these two columns is dynamic and never amounts to the same height with either column sometimes having a bigger height than the other. In IE, the left and right columns align with the bottom which creates a variable amount of space between the shorter column and the nav. What I would like is to have the columns align with the top/nav and then when an element is inserted with ajax at the top of the left_column, it just pushes the content in that column down and the two columns remained aligned at the top. I hope that made sense, any help is appreciated.

...

Using igoogle layout as an example, I have added the following css and it seems to be working:

<div id="outside">
    <div id="left_column"></div>
    <div id="right_column"></div>
</div>
<div id="footer"></div>

#outside{
  display: block;
  float: none;
  margin: 0 0 1em;
  overflow: hidden;
  position: static;
  width: auto;
}

.column {
  display: block;
  width: 40%;
  float: left;
  margin-left: 0px;
}

I have yet to fully implement it, but this seems to be aligning the columns with the top regardless of height and expands/contracts with the top as a reference point.

Answer 1

Hi there!

Maybe this resource will be of help to you:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Since you want to have only 2 columns, have a look at the given example here:
http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Kind regards, mtness.