Here's the layout I am havign a problem with (copy-paste it for checking):
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Administrative Interface</title>
<style type="text/css">
html
{
margin: 0;
width: 100%;
height: 100%;
}
body
{
background-color: #E6E6E6;
font-family: verdana;
font-size: 0.8em;
display: table;
color: #000000;
margin: 0;
width: 100%;
height: 100%;
}
#container1
{
display: table-cell;
vertical-align: middle;
}
#container2
{
display: table;
margin: 0 auto;
border: 1px solid black;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid black;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
border-left: 1px solid black;
}
#content
{
margin-left: 200px;
margin-right: 200px;
padding: 0;
text-align: center;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p
{
margin: 0;
}
</style>
</head>
<body>
<div id="container1">
<div id="container2">
<div id="top">Header</div>
<div id="leftnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
<div id="rightnav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
</div>
<div id="content">psugf</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>