Help with DIVs & CSS

[iUnknown]

Hello,

I'm trying to learn how to code layouts in DIVs and CSS. I first used SS's stickied tutorial to do my first CSS box, which worked well. Now I'm trying to teach myself to do layouts. I'm doing well, but I want to be able to add a javascript to make an iframe expand in the main content box. However, when I add lines <br> or <p>&nbsp;</p> to the content box, it makes white appear above and below the left and right. I have a div for the right and left (ids: #leftbot and #rightbot) that I would like to expand with the middle content box, but I'm not sure how to do this. I might of just done something wrong in the coding or there is something I need to add (that's why I need help!).

I've got it all in one container, then the left 3 boxes in a left container and content in middle container and right 3 boxes in right container. The CSS looks like this:

Show Hide

<style type="text/css">
<!--
body {
  text-align: center;
  background-color: #ffffff;
  margin-top: 5px;
  margin: auto;
}
p {
  padding: 0px;
  margin: 0px;
}
#container {
  width: 923px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center
}
#top {
  background: url(top.png);
  height: 199px;
}
#left {
  width: 212px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: left;
  position: relative;
}
#navtop {
  background: url(navtop.png);
  height: 22px;
}
#leftmid {
  background: url(leftmid.png);
}
#navbot {
  background: url(navbot.png);
  height: 31px;
}
#radiotop {
  background: url(radiotop.png);
  height: 20px;
}
#radiobot {
  background: url(radiobot.png);
  height: 20px;
}
#grouptop {
  background: url(grouptop.png);
  height: 26px;
}
#groupbot {
  background: url(groupbot.png);
  height: 5px;
}
#leftbot {
  background: url(leftbot.png);
}
#middle {
  width: 510px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: left;
  position: relative;
}
#contenttop {
  background: url(contenttop.png);
  height: 4px;
}
#contentmid {
  background: url(contentmid.png);
}
#right {
  width: 201px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: right;
  position: relative;
}
#statstop {
  background: url(statstop.png);
  height: 25px;
}
#rightmid {
  background: url(rightmid.png);
}
#statsbot {
  background: url(statsbot.png);
  height: 37px;
}
#linktop {
  background: url(linktop.png);
  height: 26px;
}
#linkbot {
  background: url(linkbot.png);
  height: 39px;
}
#newstop {
  background: url(newstop.png);
  height: 24px;
}
#newsbot {
  background: url(newsbot.png);
  height: 5px;
}
#rightbot {
  background: url(rightbot.png);
}
.style1 {font-size: 7px}
#footer1 {
  background: url(leftbot2.png);
  height: 26px;
}
#footer2 {
  background: url(contentbot.png);
  height: 26px;
}
#footer3 {
  background: url(rightbot2.png);
  height: 26px;
}
-->
</style>

Body code:

Show Hide

<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="top"></div></td>
  </tr>
</table>
<div id="left">
<div id="navtop"></div>
<div id="leftmid">
  <p>Nav here</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>yes</p>
  <p>it's all expandable</p>
  <p>:D </p>
  <p>&nbsp;</p>
</div>
<div id="navbot"></div>
<div id="radiotop"></div>
<div id="leftmid">
  <p>Radio text</p>
  <p>yeah baby </p>
  <p>whatever</p>
  <p>u</p>
  <p>want</p>
  <p>here</p>
  <p>lolz</p>
  <p>&nbsp;</p>
</div>
<div id="radiobot"></div>
<div id="grouptop"></div>
<div id="leftmid">
  <p>harhar</p>
  <p>mm</p>
  <p>sexily expanding</p>
  <p>woohoo </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="groupbot"></div>
<div id="leftbot">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
</div>
<div id="middle">
<div id="contenttop"></div>
<div id="contentmid">
  <p>hi</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>
<div id="right">
<div id="statstop"></div>
<div id="rightmid">
  <p>radio stats</p>
  <p>here</p>
  <p>yeah</p>
  <p>ok?</p>
  <p>&nbsp;</p>
  <p>song and stuff</p>
  <p>yeah</p>
  <p>ok cool</p>
  <p>&nbsp;</p>
  <p>&nbsp;  </p>
</div>
<div id="statsbot"></div>
<div id="linktop"></div>
<div id="rightmid">
  <p>link us</p>
  <p>can</p>
  <p>go</p>
  <p>here</p>
</div>
<div id="linkbot"></div>
<div id="newstop"></div>
<div id="rightmid">
  <p>news here</p>
  <p>title then date</p>
  <p>or</p>
  <p>however you</p>
  <p>want it</p>
  <p>so yeah</p>
  <p>news - the layout now expands </p>
  <p>lol</p>
  <p>&nbsp;</p>
  <p>pretty..</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>.. big </p>
</div>
<div id="newsbot"></div>
<div id="rightbot">
  <p>&nbsp;</p>
  <p class="style1">&nbsp;</p>
  <p class="style1">&nbsp;</p>
</div>
</div>
<table cellpadding="0" border="0" cellspacing="0" height="26"><tr><td><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div></td></tr></table>
</div>

If there is any more information I need to provide to make it clearer or to help, then let me know. I would love if anyone could help me with this and +rep will be given. I know there are probably more glitches in the coding and I can fix them later, but this is my main one