Div Won't Resize

Dysan

Why doesn't the height of the "word" div change upon entering a different percentage value?

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div id="container">
  <form id="form1" method="post" action="">
    <div id="word">
	  djklskljdlkjlkjs
    </div>
  </form>
</div>
</body>
</html>

body
{
  MARGIN: 0px;
  PADDING: 0px;
  BACKGROUND: black; /* Delete Me! */
}

#container
{
  WIDTH: 759px;
  HEIGHT: 850px;
  MARGIN: 0px auto;
  PADDING: 0px 6px 0px 6px;
  BACKGROUND: url(bg.bmp) no-repeat;
}

#word
{
  TOP: 230px;
  WIDTH: 380px;
  HEIGHT: 70%;
  FONT-SIZE: 70%;
  BACKGROUND: red;
  FONT-WEIGHT: bold;
  POSITION: relative;
  FONT-FAMILY: Tahoma;
  PADDING: 34px 45px 36px 30px; /* TRBL */
}

NogDog

Because the percentage is that of the containing block, which in this case is the form elment. If you give the form a height, then I think you'll see a difference.