3 images in a row, CSS

[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.

[Costin Trifan]

have you tried to set the background image like this? :

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

FMI:
Why don't you want to use tables? What's wrong with them?
Why a div element is better than a table element?

[bratwebdesign]

have you tried floating them all left? Is the site online so that it can be viewed?

[Radnor]

I think the DIV is a block element?!? I took the 3 GIF(s) at the top of the page here (sorry John) and wrote a quick and dirty... They went across the top of the page.

I would try in the CSS for the gifs, 'display:inline;'

linky

[stewart]

You should definitely upload a page somewhere so we can take a look, I can't really make sense of what you need! =)

[Trapped]

Anyway the both divs need to have at least 533px space so they can sit next to each other instead of under.

What you should do is float the divs. Lets presume that the FIRST image (from left to right) is sitting under the bannersubtabs class while the second image is under bannersubtabsmid class.

In that case your CSS code should look like this

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

And keep the same HTML markup. Anyway, i still don't see 3 images here, i see only 2 images.

Hope this helps, cheers.

[labrocca]

http://www.alistapart.com/articles/practicalcss/

You have that html/css all screwed up.

[sinster]

No The page is not yet uploaded anywhere..just trying to build..I will take all you r suggestions and do try to build it..Thanks guys for your time and advice