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>
1

1 Answer 1

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">
1
  • what if this doesn't help? My site works in nearly all browsers except IE
    – Markus G.
    Commented Feb 23, 2017 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.