Help with positioning glitch

Hope someone can help with this - I'm basically just about there with a header div, split into three - to hold a logo, some navigation and some contact details.

I'm just having trouble lining up the right hand <div> as it wants to site below the middle <div>.

I've been playing around with floats, and specifying widths of each, and putting in margins for the middle <div>, but every which way it doesn't quite sit right.

The page currently looks like this - I've stripped all padding and margins from the navigation. All I'm trying to do is get the right hand <div> flush at the top along with the left and middle <div>s.

http://www.travel7107.com/index4.php

The CSS for the those (plus the parent header <div>) currently looks like :

#outerWrapper #header {
	width:980px;
	color:#333333;
	background-image:url(../images/bodybg.jpg);
	height:410px;
}
#outerWrapper #header #headertopleft {
	padding-top:15px;
 	float:left;
	width:219px;
	background-color:#666;
}
#outerWrapper #header #headertopmiddle {
	padding-top:15px;
	background-color:#999;
	margin-right:180px;
	margin-left:221px;
}
#outerWrapper #header #headertopright {
	width:178px;
	float:right;
	padding-top:15px;
 	padding-bottom:25px;
 	background-color:#CCC;
}

I'm sure it must be something simple, but can't seem to spot it.

Thank you!