hi Guys
I am trying to create a game page where there are three horizontal banners, a 900 * 600 game and a vertical banner next to them, what I get whenb the screen is not wide enough is the game is under the bottom banner and the ad is overlaying initial game container area, what I need is, ad should be centered in between game start x and left end of the screen and the game should be in between two banners like how it looks below, the game and banners should be centered.

Any help would be much appreciated

-------------------------------------

900 * 100 px banner

-------------------------------------
900 * 51 px banner
| | -------------------------------------
| |
| |
| A|
| D|
| V|
| E| 900 * 600 px game container
| R|
| T|
| |
| |
| |
| |
| |------------------------------------

900 * 100 px banner

-------------------------------------






CSS Code
Code:
body {
margin-top:1px;	
}

#leaderboard_container {
margin-top: 20px;
}
 
#menu_bar {

width: 900px;

height: 51px;
margin: auto;
font-family: "Lucida Sans","Lucida Grande",Arial !important;
background:transparent url('../images/header.jpg') no-repeat;
}

.clear {
clear:both;
}
div.banner { float:left ; width: 120px; height: 600px; padding-left: 100px; margin:auto; }
.menu_button {
display:block;
width:106px;
height:29px;
float:left;
position:relative;
top:10px;
}

#btn_like {	
left:228px;
background:transparent url('../../wordGame/images/like.png') no-repeat 0px 0px;
}

#btn_like:hover {
background-position:0px -29px;
}

#btn_like:active {
background-position:0px -58px;
}

#btn_invite {
left:240px;	
background:transparent url('../../wordGame/images/invite.png') no-repeat 0px 0px;
}

#btn_invite:hover {
background-position:0px -29px;
}

#btn_invite:active {
background-position:0px -58px;
}

#btn_share {	
left:250px;
background:transparent url('../../wordGame/images/share.png') no-repeat 0px 0px;
}

#btn_share:hover {
background-position:0px -29px;
}

#btn_share:active {
background-position:0px -58px;
}

#btn_more {	
left:260px;
background:transparent url('../../wordGame/images/more.png') no-repeat 0px 0px;
}

#btn_more:hover {
background-position:0px -29px;
}

#btn_more:active {
background-position:0px -58px;
}

#game_container{
margin:0 auto;
width:900px;
height:600px;
background:transparent url('../../wordGame/images/game1.png') no-repeat fixed right top;
}

.fbgameBnr{
width:900px;
height:100px;
background:#ccc;
display:block;
background:transparent url('../../wordGame/images/bw1.jpg') no-repeat 0px 0px;
vertical-align:middle;
text-align:left;
margin:0px auto;	
}

.fbgameBnr2{
width:900px;
height:100px;
background:#ccc;
display:block;
background:transparent url('../../wordGame/images/cr1.jpg') no-repeat 0px 0px;
vertical-align:middle;
text-align:left;
margin:0px auto;	
}

.not-login {
margin:0 auto;
padding:20px;
width:900px;
}
.not-liked {
margin:0 auto;
width:900px;
padding-top:1px;
}
.nliked{

width:200px;
padding: 17px;
padding-left: 820px;


}
.ads{
	width:200px;
padding: 17px;
padding-left: 960px;
	
	}
html code

Code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/EN/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">

<head>
<title>game title</title>
<link href="css/game.css" rel="stylesheet" />
 
</head>
<body bgcolor="#000000">
  
 

<div id="console_container">
  


	<!-- banner top -->
	<div onclick= "window.open('https://apps.facebook.com/app1/')" style = "cursor:pointer;hand" class="fbgameBnr"></div>

	<div id="menu_bar" style="visibility: visible;">
	  <div class="nliked">
			 
	  </div>
	</div>
</div>	
   <div class="banner">
  
 
 <!-- Begin BidVertiser code -->
// ad code
<!-- End BidVertiser code --> 
  
  </div>
<!-- game container -->
<div id="game_container">
 // this is where the game goes  900 * 600 
</div>

<div class="clear"></div>

<!-- banner footer -->
 
<div onclick= "window.open('https://apps.facebook.com/app2/')" style = "cursor:pointer;hand" class="fbgameBnr2"></div>
</div>	
 
</div>

<div id="fb-root"></div>
 

 

</body>
</html>