Header layout doesn't work in IE

Hi all,

I am just trying to have 3 tabs and a payoff text on the right, but in IE i get a gap. The payoff is under and not on the right??

<div id="container">
 <div id="header">
    <div id="tabsMenu" >
      <ul class="tabs">
        <li class="tab1"><a href="#"></a></li>
        <li class="tab2"><a href="#"></a></li>
        <li class="tab3"><a href="#"></a></li>
      </ul></div>
      <div id="payoff"> right and center please </div>
    
  </div> 
  <div id="mainContent">dsa</div>
  <div id="footer"></div>
</div>

Code (markup):

and the css i am using now

/* CSS Document */
body {
	padding: 0px;
	margin: 0px;
	background-color:#C8D167;
}
#container {
	padding-top: 20px;
	height:600px;
	margin:0px auto;
	text-align:left;
	width:980px;
}
#header {
	height: 30px;
	clear:both;
}
/*main content*/
#mainContent {
	background-color:#FFFFFF;
}

/*end main content*/
/*tab menu*/
#tabsMenu  {

}

.tabs {
	width: 450px;
}
.tabs li {
	display:inline;
	float:left;
	margin:0;
}
#tabsMenu ul li a {
	display:block;
	height: 30px;
	}
#tabsMenu ul li.tab1 a {
	background: url(/imgs/tabsmenu/tab1.gif) top left no-repeat;

	width: 146px;
}
#tabsMenu ul li.tab1 a:hover {
	background: url(/imgs/tabsmenu/tab1_selected.gif) top left no-repeat;

	width: 146px;
}
#tabsMenu ul li.tab2 a {
	background: url(/imgs/tabsmenu/tab2.gif) top left no-repeat;

	width: 146px;
}
#tabsMenu ul li.tab2 a:hover {
	background: url(/imgs/tabsmenu/tab2_selected.gif) top left no-repeat;

	width: 146px;
}
#tabsMenu ul li.tab3 a {
	background: url(/imgs/tabsmenu/tab3.gif) top left no-repeat;

	width: 146px;
}
#tabsMenu ul li.tab3 a:hover {
	background: url(/imgs/tabsmenu/tab3_selected.gif) top left no-repeat;
	width: 146px;
}

	
/*end tab menu */

/*payoff*/
#payoff {
float:left;
margin-left: 200px;
background-color:#FF0000;
}

Code (markup):

What's your advice??

 

Would adding this work?

/*end main content*/
/*tab menu*/
#tabsMenu  {
	float:left;
}

Code (markup):

 

@apmsolutions,

it almost worked. In ie the payoff sits on the right but now a space appears between the header and the maincontent.
In firefox the opposite occurs, the maincontent div lays over the tabsmenu div???

Should i use position: relative and position: absolute??

 

I'd have to see screenshots, cause my server's down and I can't build this.