Image Placement with CSS

I'm creating a new stylesheet for my site. I have 2 images that I want to place at the top of the page - one top left, the other top center. I'd like to avoid tables but I'm having the most infuriating time trying to get the images aligned.

First I gave them the same tag:

hb{
background-image: url(image1.gif);
background-repeat:no-repeat;
background-position: top left;
top: 5px;
left: 5px;
width:175px;
height:175px;
background-image: url(image2.gif);
background-repeat:no-repeat;
background-position: top center;
top: 5px;
left: 400px;
width:175px;
height:175px;}

Then I gave them each there own tag, putting the div in the right place in the html. No matter how I do it, they both show up, but aligned at top left, overlapping, no matter what browser I use. I've tried placing the center image with and without spacing pixels.

Is it possible to have two top images? I need them on the same line. Or should I suck it up and just put them on tables in html? Everything else on the sheet is perfect and this is my only sticking point.