Tag Archives: html

display:table & display:table-cell not working in IE9

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>

display:table & display:table-cell not working in IE9

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>

Trouble with a simple display:table layout

Salam (means hello) :)

I have the following simple layout, the problem is that adding content to right div makes content on left one come down:

JS Fiddle

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent{
            width:800px;
            height:100px;
            display: inline-table;
            border: 1px solid #e8e8e8;
            background: #fcfcfc;
        }
        .parent .right{
            width:90px;
            display:table-cell;
            padding-top: 10px;
            text-align: center;
            background: #f5f5f5;
            color:#666666;
        }
        .parent .left{
            width:710px;
            display:table-cell;
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        This cell has padding-top:0px
    </div>
    <div class="right">
        <img src="images/icon.png">
        <br>some text
    </div>
</div>
</body>
</html>

Trouble with a simple display:table layout

Salam (means hello) :)

I have the following simple layout, the problem is that adding content to right div makes content on left one come down:

JS Fiddle

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent{
            width:800px;
            height:100px;
            display: inline-table;
            border: 1px solid #e8e8e8;
            background: #fcfcfc;
        }
        .parent .right{
            width:90px;
            display:table-cell;
            padding-top: 10px;
            text-align: center;
            background: #f5f5f5;
            color:#666666;
        }
        .parent .left{
            width:710px;
            display:table-cell;
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left">
        This cell has padding-top:0px
    </div>
    <div class="right">
        <img src="images/icon.png">
        <br>some text
    </div>
</div>
</body>
</html>

HTML5 and CSS3 Advent 2011

Welcome to our advent calendar. Every day in december 2011 (until the 24th) we will post new cool HTML5 and CSS3 techniques here. These techniques may not work yet in all browsers because they are part of not quite finished specs. This also means that you may not be able to view all of the examples, but we'll always tell you in which browser it actually does work.

HTML5 and CSS3 Advent 2011

Welcome to our advent calendar. Every day in december 2011 (until the 24th) we will post new cool HTML5 and CSS3 techniques here. These techniques may not work yet in all browsers because they are part of not quite finished specs. This also means that you may not be able to view all of the examples, but we'll always tell you in which browser it actually does work.