Layout Problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Ree
Forum Regular
Posts: 592
Joined: Fri Jun 10, 2005 1:43 am
Location: LT

Layout Problem

Post 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>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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...
theda
Forum Contributor
Posts: 332
Joined: Sat Feb 19, 2005 8:35 am
Location: USA

Post by theda »

Check out the http://www.w3.org/Style/CSS/ website... It has plenty of information.
Post Reply