Positioning problems

Hello guys and gals,

I decided to try my hand at designing my site using divs rather than using tabels like i usualy do. I am having a small problem however. Before i get to that let me show you what i have and what i am trying to acomplish.

My photoshop mock up, this is what i am trying to make:
[ATTACH]2945[/ATTACH]

This is what I have, the banner is the problem at the moment
[ATTACH]2946[/ATTACH]

I am using a jello design, the margins are fluid to keep the page centered and the content is frozen. Because of this I cant use absolute positioning and get it to look right at all times. I need the positioning to based on a containing div that surounds all the content and not the browser window. I played with the diffrent position types and found relative positioning did what i wanted with the hurihi picture. But when I try to position the banner-ad I cant get it to go next to her. I want it to go were i tell it and not worry about what else is around it.

heres my code thus far

Css

@charset "utf-8";
/* CSS Document */
body
{
 background-color:#52a90e;/*#d7eafe;*/
 background-image:url(../images/bg2.png);
 background-repeat:repeat-x;
 background-attachment:fixed;
}
.main
{
 border:2px;
 border-color:#000000;
 border-style:solid;
 background-color:#75b8f2;
 background-image:url(../images/bgGradiant.jpg);
 background-repeat:repeat-x;
 min-height:500px;
 border-radius:20px;
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
}
#container
{
 width:806px; 
}
#body
{
 float:right;
 width:629px;
 height:auto;
}
#sideBar
{
 width:156px;
 height:auto;
}
#footer
{
 margin-top:13px;
 width:802px;
 height:201px;
 background-color:#75b8f2;
 border:2px;
 border-color:#000000;
 border-style:solid;
 border-radius:20px;
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 text-align:center;
 padding-top:4px;
}
#container
{
 margin-top:150px;
 margin-left:auto;
 margin-right:auto;
}
#mascot
{
 z-index:99;
 position:relative;
 top:11px;
 left:554px;
}
#banner
{
 z-index:97;
 position:relative;
 top:11px;
 left:0px;
 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]XHTML namespace[/URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/hurihi.css" />
<title>Club Otaku!</title>
</head>
<body>
<div id="container">
    <div class="banner">
     <img src="images/banner.jpg" />
    </div>
 
 <div id="mascot">
     <img src="images/hurihi.png" border="0" />
    </div>
 
    <div id="body" class="main">
        <h1>
            Hello World
        </h1>
        <p>
            This is a test
        </p>
    </div>
 
    <div id="sideBar" class="main">
        <h1>
            Side bar
        </h1>
        <p>
            Another test
        </p>
    </div>
 
    <div id="footer">
     About Us | FAQ | Buisness | Affiliates | Rules
     <br /><br />
     <img src="images/logoJariya.png" border="0" alt="copy-right Club Otaku" />
    </div>
</div>
</body>
</html>

Note: I also tried to float the banner and Hurihi but it did not work.

any help would be apreciated