Layout Problem IE6, IE7 (And Mac IE)

[JADobson]

Hi folks,

I'm currently redesigning my old schools web-page as part of a personal development and class project.

The layout can be seen here:

http://www.jadobson.webatu.com/index.html

Or here:

http://i34.tinypic.com/2uh23d3.jpg

It displays fine (Least to my knowledge) on all versions of FF, Safari, Opera, but only on IE8. It seems to be a typical problem when using multi-column layouts on IE5, 6 and 7. I have looked at a few other similar issues on here, however I haven't been able to eliminate the problem yet.

The layout is a 3 col layout with a header and a footer:

---------
---------
-- -- --
-- -- --
---------

The problem is that the 2nd and 3rd column are appearing below the first, like so:

---------
---------
--
--
--
--
--
--
---------

Can be seen here:

http://i38.tinypic.com/k2xm6q.jpg

The CSS for the DIV's is as follows (Taken from a 3 col demo/tutorial):


#wrapper {
width: 100%; //870px
display:table;
border-spacing: 0;
border-collapse: collapse;
}
#firefox-bug-fix {
display: table-row;
}
.columns {
display: table-cell;
vertical-align: top;
}
#c1 {
width: 400px;
}
#c2 {
width: 235px;
}
#c3 {
width: 235px;
}

And the HTML:


<div id="wrapper">
<div id="firefox-bug-fix">

<div class="columns" id="c1">
<h1>Example Content.</h1>
</div>

<div class="columns" id="c2">
<h1>Communique</h1>
Example Content.
<hr />
<h1>Quick Links</h1>
Example Content.
</div>

<div class="columns" id="c3">
<h1>Student VLE Login</h1>
Example Content.
<hr />
Example Content.
</div>
</div>

Any help would be greatly appreciated!