CSS Layout does not work in IE

Hello All,

I have a very basic CSS based layout, which is suppose to give me 1 top header and underneath it a left navigation column followed by a Main Display to the right of it. My code seems to work fine in FireFox, Chrome and Safari but does not work in IE. For some reason in IE the Navigation Bar and Main Display are stacked on top of each other. Anyone know why?

Here is the code:

CSS:


body
{
background: #000000;
}

#header
{
background-color: #404040;
Width: 960px;
Height: 200px;
}

#container 
{
display: table;
}

#row 
{
display: table-row;
}

#left
{
background-color: #33332D;
Width: 250px;
height: 800px;
display: table-cell;
text-align: left;
}

#middle
{
background-color: #EFEFEF;
width: 700px;
height: 800px;
padding-left: 10px;
padding-top: 10px;
display: table-cell;
text-align: left;
}

HTML:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Portal</title>
 <link href="Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
<center>
<div id="header">
Portal
</div>
</center>
<center>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>

<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
</div>
</div>
</center>
</body>
</html>

Thanks,
Pete

CSS Layout does not work in IE

css fixed layout bug ie

digioz

htmlbasictutor

digioz

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week