How to show 3 divs on the same line?

[PHPstarter]

Hi.

I'm trying to put 3 divs on the same line, but it doesnt work.

My HTML part is:

    <div id="frame_twrap">
          <div id="frame_tl"></div>
          <div id="frame_t"></div>
          <div id="frame_tr"></div>
    </div>
 

And the CSS is:

#frame_twrap {
    top: 50px;
    width: 944px;
    height: 22px;
    border: 1px solid black;
    position: relative;
    clear: both;
    }
 
#frame_tl, #frame_tr, #frame_t {
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    display: block;
    z-index: 99;
    margin: 0 auto;
    }
 
#frame_tr {
background-image: url(skin/new/frame_top_r.png);
float: right;
}
 
#frame_tl {
background-image: url(skin/new/frame_top_l.png);
float: left;
}
 
#frame_t {
background-image: url(skin/new/frame_top.png);
background-repeat: repeat-x;
width: 900px;
}

And the result I'm getting is:
http://img.photobucket.com/albums/v4...divproblem.jpg

The 3 divs each has a background image for left, middle and right.
The border is just there to show the area they are confined to (have tried adjusting its size, no luck).

So can anyone please tell me why the right image won't place itself where it's supposed to be? :)

[Death Slaught]

Give #frame_t a float: left;

Regards, Death

Edit: ^_^

[JKing]

frame_t needs a float:left;


A few other things...
Divs by default are block elements.
z-index only works on elements that have been positioned.

If your width is going to be fixed why not turn all three images into one? Then you just need a top and bottom div instead of each individual corner.

Edit: Seems I was a little slow! Doh! :)

[PHPstarter]

Thanks, lol. Little thing fixed it all.

I'm gonna keep the width customizable, so i cant merge the images ;)

Thanks guys for the help and DIV info!