2 images next to each other not floating left

I have 2 images that should be right next to each other to form one image.

now my problem is I have both images floating left but it is putting them one on top of each other.

my html is:

<div id=logo><img src="images/logo1.gif" alt="logo" width="239" height="153" border="0" align="absbottom"><img src="images/top2.gif" width="543" height="153" border="0" align="absbottom"></div>


my css is

#logo{
display:inline;
width:785px;
height:153px;
padding:0px;
margin:0px;
}
.logo img{
float:left;
}

what am i doing wrong?? please help?

Get rid of display:inline; on #logo. It would probably be better to do something like this
<div id="logo"><img src="images/logo1.gif" alt="logo" width="239" height="153"></div>
#logo {
width:785px;
height:153px;
background:url(images/top2.gif) top right no-repeat;
}
Oh and to tell you what you were doing wrong you used
.logo img{
float:left;
}
When it should have been
#logo img{
float:left;
}