CSS display table in IE

Question

I have the following code and CSS. It works good in Chrome, but not in IE. Is there any way to make it work in IE too?

CSS:

<style type="text/css">
        .table {width:100%;height: 1%;background-color: lime;display: table;border-collapse: collapse;}
        .row {display: table-row;}
        .centercell {vertical-align: top;display: table-cell;background-color: #0f0;}
        .top{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
        .bottom{background-color:yellow;width:100%;height:20px;z-index: 1;position: relative;}
        .middle{background-color:pink;width:100%;height: 100%;margin: -20px 0px;position: relative;padding: 20px 0px;}
        .rightcell {vertical-align: top;background-color: #f00;display: table-cell;width:155px;background-image: url('img/bg1.gif');background-repeat:repeat-y}
        .leftcell {vertical-align: top;background-color: #f00;display: table-cell;width:171px;}
    </style>

HTML:

<div class="table">
<div class="row">
    <div class="leftcell">
        right column
    </div>
    <div class="centercell">
        <div class="top">center top</div>
        <div class="middle">center middle</div>
        <div class="bottom">center bottom</div>
    </div>
    <div class="rightcell">
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
        right column<br> 
    </div>
</div>    

Solution

IE7 doesn't support display:table, your code looks fine in IE8, IE9 and IE10. So either you must use an actual <table> or, if it's an option, use floats instead.

No other way, I'm afraid.

Edit: Apparently this is for your page layout. You shouldn't be using <table> or display:table. Just float some DIVs man!

Comments

[Andy]

IE7 and below don't support display: table, so the only workaround is actually using a table. caniuse.com/css-table

[Chuck Le Butt]

Here's a JSFiddle for everyone (took two seconds to make): jsfiddle.net/U9eVA

[Andy]

@RobertKoritnik Hence "7 and below"

[Don Cheadle]

Oh it's not so simple as you may think ... stackoverflow.com/questions/1205159/… .. esp. when you don't want to have to modify the css (padding)everytime you need to add another line-breaking element in your div..

[Chuck Le Butt]

@mmcrae That's a very common problem. Flexbox can help there these days, too. caniuse.com/#feat=flexbox

[Alexandra]

@ChuckLeButt Flexbox is great only if you don't have to support IE 8 or 9