1

Salam (means Hello) :)

I'm trying to implement a 3 column layout for my web page using display:table & display:table-cell. It works fine in firefox and chrome, and I know that this feature should be supported in IE 9, but all I achieved so far is no more than this screenshot:

enter image description here

how can I get this to work in IE 8+ ?

here is my complete code:

(JS Fiddle available)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width:100%;
            margin:0;
            padding:0;
        }
        .container{
            display:table;
            width:100%;
            border-collapse:separate;
        }
        .col{
            display:table-cell;
        }
        .side-1{
            width:200px;
            background: #efefef;
        }
        .side-2{
            width:200px;
            background: #f8f8f8;
        }
        .content{

        }
        #header,#footer{
            height:40px;
            background: #e4f3fd;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div class="container">
    <div class="col side-1">
        sidebar 1
        <br>.<br>.<br>.
    </div>
    <div class="col side-2">
        sidebar 2
        <br>.<br>.<br>.
    </div>
    <div class="col content">
        content
        <br>.<br>.<br>.
    </div>
</div>
<div id="footer">footer</div>
</body>
</html>
Nasser Torabzade
  • 6,490
  • 8
  • 27
  • 36
  • 2
    Worked for me with IE8, However please note that using *table* or CSS *table* displayed elements [is not appropriate for layout purposes](http://stackoverflow.com/questions/21378240/liquid-layout-with-liquid-left-fixed-right-column/21378465#21378465). And one more thing, In CSS *table layouts*, all elements [should follow the same structural properties](http://stackoverflow.com/questions/18516836/how-to-approximate-table-layout-with-css-when-structure-is-disjointed/18516881#18516881). – Hashem Qolami Feb 15 '14 at 21:43

1 Answers1

9

The problem is that IE doesn't render the page as it's latest version, adding a X-UA-Compatible meta tag lets us to choose which version of IE should render the page, setting it to the latest (edge) version solves the problem:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Community
  • 1
  • 1
Nasser Torabzade
  • 6,490
  • 8
  • 27
  • 36