Forum Moderators: not2easy

Message Too Old, No Replies

CSS Layout does not work in IE

css fixed layout bug ie

         

digioz

10:18 pm on Sep 16, 2010 (gmt 0)

10+ Year Member



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

htmlbasictutor

8:34 am on Sep 17, 2010 (gmt 0)

10+ Year Member



This works:

CSS
body
{
background: #000000;
}
#wrapper {
width: 970px;
margin-left: auto;
margin-right: auto;
}
#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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Portal</title>
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"> Portal </div>
<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>
</div>
</body>
</html>

digioz

2:11 pm on Sep 17, 2010 (gmt 0)

10+ Year Member



Yep, that did the trick. Thanks for the help!

Pete