Floating issues

[KevinM1]

I'm trying to float two images to the left and right of a div, respectively, with a third item in the middle.  Since the images are small, they looked out of place when I enlarged them and floated all three to the left.  So, now I'm trying to float one left, one right, and leave the middle one alone (the div has text-align: center, so the middle image should be centered).  Unfortunately, my right-floated image keeps jumping down a line, so it looks pretty bad.  I tried restricting the containing div's height to 90px, but this hasn't helped the problem.

The problem can be seen at http://www.thinkingmachinestore.com/storefront.php.  I've put a black border around the div in question.  Interestingly, in IE7, it looks like the incorrectly floated image stretches the div vertically.  In Firefox, the div is the correct height, with the incorrectly floated image overlapping the lower-right border.

Please help.
Thanks :)

[jcombs_31]

why not just float them all left and set margins rather than enlarging?

[nogray]

The right floated image should come first in the code.
[code]
<a href="viewcat.php?cat=peripherals&PHPSESSID=99b9b7f7e7fa611cb34a2d4e6bf20799"><img src="images/store/printer.jpg" alt="" style="float: right;" /><img src="images/store/mp3.jpg" alt="" style="float: left;" /><img src="images/store/camera.jpg" alt="" /></a>
  <a href="viewcat.php?cat=peripherals&PHPSESSID=99b9b7f7e7fa611cb34a2d4e6bf20799"><img src="images/store/mp3.jpg" alt="" style="float: left;" /><img src="images/store/camera.jpg" alt="" /></a>
[/code]