Page 1 of 1

Layout Problem

Posted: Tue Aug 02, 2005 3:58 am
by Ree
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):

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>

Posted: Tue Aug 02, 2005 6:59 am
by feyd
unless you specify certain things, a div is automatically 100% width of it's container, whatever that may be. However, there are certain CSS attributes that will make it switch to a compact form (however the contained text must actually have a width in some fashion or it will still behave like "normal").

Typically these attributes are things like: position, width, float...

Posted: Tue Aug 02, 2005 8:18 am
by theda
Check out the http://www.w3.org/Style/CSS/ website... It has plenty of information.