How do I avoid images being displaced?

I have 3 images with the css style float:left.

So they are placed next to each other; it's basically an image slider. The left image is a left arrow, the center images is the picture and the right image is a right arrow.

In 开发者_如何学Cthe beginning, I hide the left arrow with jQuery, and when you push the right arrow I want the left arrow to unhide. The problem is that when I do that, the picture gets pushed to the right a bit because the width of the left arrow affects the picture.

So how can I hide an images without it losing its width so the picture doesn't get shifted?

---

It sounds like all you need to do is set the visibility style. Something like:

$("#LeftArrowImage").css ('visibility', 'hidden');

Unlike jQuery's hide() or display:none;, visibility:hidden; preserves the layout effects of a node, without showing it.