hey guys


i have 3 pictures :

left.gif something like this " <--- "
center.gif something like this "--|--"
right.gif something like this " --->"

i want to put them in a table td , like :

<table><tr><td><img src="left.gif /><img src="center.gif /><img src="right.gif /></td></tr></table>

so the whole thing will be seen like : <--- --|-- --->

well now the problem .

the td width is more than the width of all the images together . in this case i want the right image stick to the right corner (border) . the center image stands in the center and the left stick to the left side , something like : <--- --|-- --->

all in one line. AND
when i make the browser size smaller , as the table is getting smaller these 3 images stick right together without space , like

<-----|----->


i've tried giving the left image tag, the align center, the right image , align right and the center align center, but it is not working . most of the time it won't make all the images in one line , and when i make th browser size smaller , it shows the pics in 3 lines ...

thanks for any help

One way is to float the left image left and the right image right. Those two images should be before the center image in the HTML source.
http://htmlhelp.com/reference/css/box/float.html

yea , float did it thanks .
now the right image has stucked to the right and so the left .
but when make the browser size smaller , the images gets close (it is fine till now) , but exactly when the 3 images stick to each other , when i make the size smaller, the center image jumps one line down . which i don't want them to move from that point, how to solve this ?
i'm using the recent code :

<table border="1"><tr><td width="1500" align="center"><img src="l.gif" style="float:left;" /><img src="r.gif" style="float:right;" /><img src="center.gif" /></td></tr></table>

Contain the images in an element that's as wide as all three images together, maybe. Hard to say what's best without seeing the actual page. For instance, is the table really needed and why is the TD 1500 pixels wide? That's a whole lot wider than my whole screen.

1500 is just for seeing how it goings, it sure can be less . but the only point is fix the images not to move when they are stuck together (no space between them), if i have get you right .

i need this "moving" images . so putting them all in a element as wide ... will not work .

if you just try the code i gave in m last post, you will see by making the browser window smaller ,the center image jumps down ...

The only other thing that comes to mind is to put them all inside separate td elements.

Or a nice spacer gif, oops sorry, spacer DIV.

Or you could go with min-width and say to hell with IE versions older than 7 or go with min-width and apply a fix for older IE.

Since I have an allergic reaction to floats in general, I would second Darin's suggestion: Put each image in a separate td. To me this is the simplest and cleanest solution.