Css columns float

Hey everyone,

I am pretty new to css (and this forum). I am trying to have a bar along the top of my page (with round edges and a gradient) that will adjust based on browser window. There are 3 images, topleft, middle, and top right. I have gotten the topleft and middle images to line up side by side perfectly, but the topright image keeps dropping down. Here is the CSS code:

#topleft {
background-image:url(images/topleft.gif);
background-repeat:no-repeat;
height:72px;
width:28px;
float:left;
}
#middle {
background-image:url(images/middle.gif);
background-repeat:repeat-x;
background-position:right;
height:72px;
width:inherit;
margin-left:28px;
margin-right:28px;
}
#topright{
background-image:url(images/topright.gif);
background-repeat:no-repeat;
width:28px;
height:72px;
float:right;
}

any thoughts? thanks