Image Alignment

[Cheater]

I know there is a really simple solution to this problem, I just am blanking on what it is.

I have a webpage that is displaying a lot of images on one line. This causes the browser to automatically move some to the next line to keep the screen from stretching. How do I force all the images to remain on one line?

[Rossario123]

you can use a table

<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
</tr>
</table>

[Cheater]

I know I can use a table. I would like to avoid it if possible.

[Rossario123]

you can use css

.container{margin:0 0 0 0;width:auto;height:auto;}
/* tells the browser all images will be positioned absolute inside the div */
.container img{position:absolute;border:0;}

/* position each image and define them with a simple class */
img.a1{left:0;top:0;}
img.a2{left:20px;top:0;}
img.a3{left:40px;top:0;}
img.a4{left:80px;top:0;}
img.a5{left:100px;top:0;}
img.a6{left:120px;top:0;}

im su
considering if the images were each 20px wide. And considering we did not wan't to position the div all the content will be inside.

<!- xhtml portion ->
<div class="container">
<img class="a1" src="#"/>
<img class="a2" src="#"/>
<img class="a3" src="#"/>
<img class="a4" src="#"/>
<img class="a5" src="#"/>
<img class="a6" src="#"/>
</div>

[Rossario123]

p.s just to be safe you might wan't to assign a specific height and width to the content div

[Cheater]

I still think that we are doing more work than needed. Thanks for your help, I think I'll try to find this basic method. I know I've used it before, I just can't remember what it is.

[Rossario123]

you can just use

<img src="#"/>&nbsp;<img src="#"/>

but i really hate using that....:(

[Poxicator]

why not just make the images one single (wide) image. problem solved :-D