Hi guys.

I am trying to design a Christmas themed layout for my website. I would call myself an amateur at coding though, and this is causing problems.

I am trying to put images around 3 iframes so that my "snowing background" can show through.

However, no matter what code I try, they just won't seem to do what I want them to do or go where i want them to go.

So anyway, heres the code I am using -
Code:
<html>
<head>
<title>myBOBBA.net >> Habbo Fansite</title>
<!--BEGIN META TAGS-->
<META NAME="keywords" CONTENT=" templates, free templates,web template,download, sets, clipart, art, textures, gifs, backgrounds, pages, library, remotes, fantasy, 3d, cool, graphcis, homepage,  buttons, bars, animated GIF's, bullets, backgrounds, clipart and stock photos, myBOBBA, mybobba, habbo, habbo hotel, fansite, mybobbaforum, myBOBBAForum, myBOBBAforum, haggis, Haggis, Hagg!s, hagg!s, Granny.Haggis, radio, rares, events, graphics, news, latest, stats, staff, DJ">
<META NAME="description" CONTENT="templates, free templates,web template,download, sets, clipart, art, textures, gifs, backgrounds, pages, library, remotes, fantasy, 3d, cool, graphcis, homepage,  buttons, bars, animated GIF's, bullets, backgrounds, clipart and stock photos, myBOBBA, mybobba, habbo, habbo hotel, fansite, mybobbaforum, myBOBBAForum, myBOBBAforum, haggis, Haggis, Hagg!s, hagg!s, Granny.Haggis, radio, rares, events, graphics, news, latest, stats, staff, DJ">
<META NAME="rating" CONTENT="General">
<META NAME="ROBOTS" CONTENT="ALL">
<!--END META TAGS-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!--
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #CC0000;
	font-size: xx-small;
	font-weight: bold;
}
-->
body {
	margin-top: 0px;
	background-image: url(images/layout_images/background.gif);
	}
.style2 {
	color: #000000;
	font-weight: bold;
}
.style3 {
	color: #FF0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style4 {
	color: #33CC00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/layout_images/background.gif">
<table cellspacing="0" cellpadding="0" border="0" height="66" width="100%" aligwidth="100%" background="images/topbarbkg.gif">
  <tr background="images/topbarbkg.gif" valign="top"> 
    <td background="images/topbarbkg.gif"><img src="images/topbar.gif"></td>
    <td width="100%" height="45" background="images/topbarbkg.gif"><div align="left"><img src="images/topbar1.gif"></div><div align="left"><iframe name="says4" id="says4" src="http://mybobba.net/cpg/djsays4.php" frameborder="0" background-color="#FFFFFF" allowtransparency="true" height="30" width="50%"></iframe></div><div><img src="images/topbar2.gif"></div></td>

  </tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" height="2" width="100%" allowtransparency="true">
  <tr> 
    <td width="260" height="2" valign="top"> 
      <div align="left"><img src="images/breaker.gif" width="225" height="29"><br>
        <img src="images/spacert.gif" height="77"><a href="#"></a><br>
        <img src="images/spacer1t.gif" height="75"><a href="#"></a><br>
        <img src="images/spacer2t.gif" height="76"><a href="#"></a><br>
        <img src="images/spacer3t.gif" height="80"><a href="#"></a>
		<img src="images/breaker2.gif" ></div>    </td>

    <td width="601" height="2" valign="top"> 
      <div align="center"><img src="images/head_left.gif" width="700" ></div>
      <div align="left" id="main2" name="main2"><iframe name="main4" id="main4" src="http://mybobba.net/pages/home.html" width="98%" height="1000" frameborder="0" allowtransparency="yes" scrolling="No"></iframe></div><div class="style2">  
        <div align="center">
          <p><span class="style3">Have a Merry Christmas!</span></p>
          <p> <span class="style4">Copyright  2008-2009 myBOBBA, All Rights Reserved </span></p>
        </div>
      </div></td>
		<td rowspan="15" background="images/layout_images/background.gif" width="165" height="305" align="center" valign="top"><div id="news2" name="news2"><iframe src="http://mybobba.net/pages/headlines.php" name="news2" width="100%" height="220" scrolling="no" frameborder="0" class="style17" id="news2" allowtransparency="true" background-color="#FFFFFF" background-image="images/border1.jpg"></iframe>		</div>
		<div width="141" id="stats2" name="stats2" align="center" valign="middle"><iframe name="stats2" id="stats2" src="http://mybobba.tech-hosts.co.uk/radio_stats.php" frameborder="0" background-color="#FFFFFF" allowtransparency="true" width="200"></iframe></div>
		<div id="player3" name="player3"><iframe name="player3" id="player3" src="http://mybobba.net/pages/player.html" width="100%" height="100%" frameborder="0" allowtransparency="yes" scrolling="No"></iframe></div>
		<div><span class="style14 style1">
    Site Best Compatible With FireFox!</span></div></td>
  </tr>
</table>
</body>
</html>
You can find the above in place at: http://mybobba.net/layouts/index4.php

You will notice the 3 iframes on the right hand side. These are all the right size and in the right place, but as you can see, don't show up great due to the background. But, even without a background, they are floating which doesn't look too great (ok yeah I know the whole thing looks crap, but images are changing once I have the coding down...)

I tried giving them individual image backgrounds (respectively http://mybobba.net/layouts/images/border1.png as well as border2.png and border3.png)

But this didn't work, so I tried splitting the images and tried using the code from below which was originally from something else, but the images were out of proportion. I know that could have been fixed so that wasn't my main concern.

Code:
<table border="0" align="center" cellpadding="0" cellspacing="0">
   <tr>
    td rowspan="4" colspan="2"><img name="index3_r1_c6" src="http://mybobba.net/images/index3_r1_c32 (1).png" width="33" height="148" border="0" id="index3_r1_c6" alt="" /><td width="43"></td>
  </tr>
  <tr>
    <td colspan="3"><img name="b1top" src="images/b1top.png" width="100%" border="0" id="b1top" alt="" /></td>
  </tr>
  <tr>
    <td><div><img name="b1left" src="images/b1left.png" border="0" id="b1left" alt=""  /></div></td>
    <td width="244" background="http://mybobba.net/images/index3_r3_c4.png" valign="top"><iframe name="stats" id="sstats" src="http://mybobba.tech-hosts.co.uk/radio_stats.php" width="100%" height="187" frameborder="0" allowtransparency="yes" scrolling="No" ><a href="http://mybobba.tech-hosts.co.uk/radio_stats.php"></a></iframe></td>
    <td width="132"><div><img src="images/b1right.png" alt="" name="b1right" border="0" id="b1right" /></td>
  </tr>
  <tr>
    <td colspan="3"><img src="images/b1bottom.png" alt="" name="b1bottom" width="100%" border="0" id="b1bottom" /></td>
  </tr>
</table>
But alas, I could not get it to go back on the right hand side again, it kept wanting to go to the bottom of tha page. Everything I try, breaks it.
Oh, I'm using dreamweaver to edit.

Once again the site I'm trying to edit is:
http://myBOBBA.net/layouts/index4.html

I appreciate all help I can get.


Thanks guys


*EDIT: unchecks auto parse links*