[sinster]

I am designing my website in css but i am getting problems with 3 images i want next to each other. i sliced the images and now the images are placing underneath each other.

.bannersubtabs{
width: 267px;
height: 17px;
background-image:url(images/images/left-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}
.bannersubtabsmid{
margin:0px;
width: 266px;
height: 17px;
background-image:url(images/images/mid-sub.gif);
font-size:93%;
background-repeat:no-repeat;
}

the HTML

<div class="bannersubtabs">
<ul>
  <li><a href="#"><span class="bannermenu1"><span class="bannermenu">Home</span></span></a></li>
  <li><a href="#"><span class="bannermenu1"><span class="bannermenu">Home</span></span></a></li>
  
</ul>
<div class="bannersubtabsmid"></div>

I already tried using float but that didn't work.
And i don't want to use any tables in it so please don't say:'Just use tables"
I think there is a code for it but i tried everything but couldn't find it.
Help is appreciated.