Layout Problem
Posted: Tue Aug 02, 2005 3:58 am
I'm having a small problem with my layout. The layout itself looks pretty ok, just one thing bothers me, #content div. As you can see it has no width specified, so IMO it should shrink as much as the widest element inside it (in this case it would be text 'psugf'), but it seems to have width on its own (it's wider than it should be). However, if you resize browser window width, it starts shrinking until its borders reach the text. So my question is, why doesn't it shrink according to the width of the text automatically, and how could I correct it?
Here's the layout I am havign a problem with (copy-paste it for checking):
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>