css table layout works in chrome not in IE9

Question

I have a working example of a layout that I cant get to work in IE. When I click on the buttom I toggle the size between 50px and 100px on the bottom div.

I tried to make a fiddle but couldnt get it to work.

<style type="text/css">
    .table
    {
        display: table;
        width: 100%;
        height: 100%;
    }

    .bottom
    {
        display: table-row;
        height: 100px;
        background-color: red;
    }

    .top
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }

    .header
    {
         height: 100px;
         background-color : gray;
    }

    .content
    {
        display: table-row;
        height: 100%;
        background-color: yellow;
        position: relative;
    }

    .footer
    {
        display: table-row;
        height: 100px;
        background-color: blue;
    }

</style>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
<div class="table">
    <div class="top">
        <div class="table">
            <div class="header" >
                header
            </div>
             <div class="content">
                1.1
            </div>
            <div class="footer">
                1.2
            </div>
        </div>
    </div>
    <div class="bottom">
    <!-- Can change bottom height to 50px on click -->
        <button id="changeSize"></button>
    </div>
</div>
</div>

I know you've tried, but this is difficult to answer without a demo. Try to make a http://jsbin.com/ demo if you can't reproduce it on http://jsfiddle.net/. — thirtydot, Jun 25 '12 at 14:19
Don't use this sort of layout. It's just as bad a using a `` and be over with. — Madara's Ghost, Jun 25 '12 at 18:29
@SecondRikudo, why is it bad to use that sort of layout in CSS? — Chalky, Jul 18 '14 at 01:42

score 0 · Answer 1 · edited May 23 '17 at 10:09

I have got the code above working in a jsfiddle: http://jsfiddle.net/c8nLb/1/

As far as I know, it works in IE(9).

I noticed the element with the class bottom and changed it to an ID ( getElementsByClassName IE resolution issue)

I also moved the height from the main CSS styling rules block to an inline style because I had trouble getting it to take the height style with the Javascript.

Hopefully it works for you too!

css table layout works in chrome not in IE9

1 Answers1