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:



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):

Code:
#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:

HTML Code:
<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!