My footer text is far too low off the page

[Yesideez]

I've started learning how to make pages using DIV instead of TABLE and have hit something weird which I can't figure out why it's happening...

 

Here's the link to a page I'm making for a friend:

http://englishnowtv.pictureinthesky.net/index2.html

 

As you can see the footer text shoots off the bottom of the page. I've tried adding "width" to the DIV concerned and it stays there (using FF), in IE it isn't there!?

 

Here's the CSS in full:

body {
  background-color: #ffffff; /*white*/
  margin: 0px 0px 0px 0px;
  text-align: center;
}

.tornpaper {
  position: relative;
  top: 0px;
  background-image: url('gfx/torn_blue_paper.gif');
  background-repeat: no-repeat;
  height: 94px;
  width: 944px;
  padding-top: 0px;
}

.header {
  position: relative;
  top: -70px;
  left: -150px;
  width: 600px;
  font: 46px "arial black";
  font-weight: bold;
  color: #ffaa00;
  text-align: center;
}

.menubody {
  position: relative;
  top: -242px;
  width: 944px;
  background-color: #ff0000;
}

.menupanel {
  position: relative;
  top: -0px;
  left: -0px;
  float: left;
  background-color: #dae4ee;
  width: 178px;
  height: 480px;
  background-color: #ebf5ff;
  border-top: 1px #ffcc00 solid;
  font: 10px verdana;
  color: #000000;
  font-weight: bold;
  text-align: center;
}

.bodypanel {
  position: relative;
  top: 0px;
  left: 0px;
  float: right;
  width: 766px;
  height: 480px;
  background-color: #ccecff;
  border-top: 1px #ffcc00 solid;
}

.tvpic {
  position: relative;
  left: 340px;
  top: -150px;
  z-index: 1;
}

.learnpic {
  position: relative;
  top: 10px;
  left: -234px;
}

.infobox {
  position: relative;
  top: 30px;
  left: 0px;
  z-index: 2;
  width: 670px;
  background-color: #99ccff;
  border: 1px #cc3399 solid;
  padding: 5px 5px 5px 5px;
  font: 12px arial;
  color: #000000;
  text-align: left;
}

.footer {
  position: relative;
  top: 239px;
  width: 944px;
  height: 20px;
  background-color: #ffffff;
  border-top: 1px #ffcc00 solid;
  font: 9px tahoma;
  color: #000000;
  text-align: center;
}

[AndyB]

Yikes! Too much reliance on position in the CSS of what is a pretty plain design.

[Yesideez]

Yeah I figured that much, I've no idea how to make things float around without positioning everything. When I tried to let things "sit there" they went all over the place

[AndyB]

This should help - http://css.maxdesign.com.au/floatutorial/

[Yesideez]

Many thanks - will take a peek and see what I can pick up

 

EDIT: Just started reading the site - a wealth of information - definitely bookmarked