How do I avoid images being displaced?

Question

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 the 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?

Answer 1

see if this helps you: http://stackoverflow.com/questions/3607314/a-slide-right-and-left-effect/3607428#3607428

Answer 2

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.