Margin-Left does not work in the slide show

Question

I have created simple slide show that has 7 div's of 300px width and height. Each div is placed relative to each other. All are placed within a container div of 900px relative to each other with margin left as 10px. Now to slide the images i am changing the margin left.

Case1: Margin left of all div is 10px; Now the slider will move the first div by setting its margin-left to -310px. All other divs follow the first div since they are relative to each other.

Case2: Now when i set the margin of first div to -620px, Position of other div does not change, same is observed in all other 5 cases. Why is this happening. Please Do explain. Let me if Any other details are required. I haven't added the code since a lot of other things are included withing the slider which will confuse all.

link to jfiddle http://jsfiddle.net/#&togetherjs=LFTr8KkT3y

Regards,

Answer 1

You don't need display: inline-block and float: left at the same time on #slider div . The fiddle worked when i removed float: left .