CSS problem: Please Help!

Hi All ...

Hoping a CSS guru can help me out here. {Paul??  anyone? }

I have 4 images: leftheader, middle, and right with a logo.

Since div's are block level elements, I'm not able to figure out the right formula for getting everything all in one line, so-to-speak. ie: rather than going on one line to form the header, they stack.

Style:

body {
    margin: 30px;
    font: 12px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    line-height: 1.4em;
    color: #ececec;
    background: #B7BCC3 url(images/bck.jpg) repeat-x;
}

#left {
    height: 77;
    margin-bottom: 0;
    position: relative;
    background: transparent url(images/header-left.png) no-repeat left top;
}

#middle {
    height: 77;
    margin-bottom: 0;
    position: relative;
    background: transparent url(images/header-middle.png) repeat-x center top;
}

#right {
    height: 77;
    margin-bottom: 0;
    position: relative;
    background: transparent url(images/header-right.png) no-repeat right top;
}

#logo {
    float: left;
    margin-left: 8px;
    width: 395px;
    height: 77px;
    background: transparent url(images/logo.png) no-repeat top left;
}

HTML page:

<div id="container">

<div id="left"> </div>

<div id="middle"> <div id="logo"> </div> </div>

<div id="right"> </div>
     
</div>

Can someone tell me the right way to phrase the style sheet so this works correctly?  Any Help would be appreciated tremendously.

TIA!!