css display: table - compatability issues with ie

Question

I am trying to implement the holy grail layout described here: http://colintoh.com/blog/display-table-anti-hero

It works brilliantly, except in IE. I'm testing on IE9, which is supported according to this website: http://caniuse.com/#feat=css-table

However, my sidebars are appearing above and below my main content.

Here is the skeleton html:

<body>
<div class="wrapper">
   <div class="header">HEADER</div>
   <div class="main">
    <div class="column sidebar"></div>
    <div class="column content">Main Content</div>
    <div class="column sidebar"></div>
  </div>
  <div class="footer">FOOTER</div>
</div>
</body>

and the css:

  body {
      background: #FFF;
      color: black;
    }
    .wrapper {
      height: 100%;
      display: table;
      width: 100%;
      text-align: center;
    }

    .header {
      display: table-row;
      height: 1px;
    }

    .main {
      height: 100%;
      display: table;
      width: 100%;
    }

    .column {
      display: table-cell;
    }

    .sidebar {
      width: 10%;
    }

    .footer {
      display: table-row;
      height:1px;
    }

Why isn't this purportedly supported layout working in IE9?

There are a few answers already on stack overflow that might help you. This one: http://stackoverflow.com/questions/21803840/displaytable-displaytable-cell-not-working-in-ie9 Also: http://stackoverflow.com/questions/12106894/displaytable-cell-not-working-in-ie9 — Larz, Dec 04 '14 at 18:49

score 1 · Answer 1 · answered Dec 04 '14 at 19:18

1

I added the following tag to the top of my section and that fixed it.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

answered Dec 04 '14 at 19:18

detran

373
2
12

css display: table - compatability issues with ie

1 Answers1