How to display two images on the same line (CSS)

I'm currently skinning site for a virtual airline and I need help as to how to get two images to show up on the same line instead of one breaking onto the next line.

It should be displayed as:

LOGO ICON

But instead it turns into:

               ICON

LOGO

Does anyone know how to fix this in the CSS?

Thanks!

Solution

First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.

Replace the #top div with the following in your layout.tpl file:

<!-- Logo + Search + Navigation -->
<div id="top">
    <a id="logo" href="<?php echo SITE_URL?>" target="_blank">
        <img src="/lib/skins/klm/img/logo.png" alt="Home">
    </a>
    <img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>

Replace the following CSS style declarations with this:

#fb {
    float: left;
    position: absolute;
    display: inline;
    width: 50px;
    bottom: 0;
    right: 0;
}

#logo {
    bottom: 0;
    display: inline;
    left: 0;
    position: absolute;
}

#top {
    height: 58px;
    margin: 0;
    padding: 10px 0;
    position: relative;
}