CSS负边距不起作用？

Question

All right, this should be simple. Basically, what I'm trying to do here is create the layout for a carousel image gallery. JSFiddle is here...

http://jsfiddle.net/G5Us4/1/

CSS...

.gallery {

margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #000000;
height: 300px;
overflow: hidden;
white-space: nowrap;

}

.image {

margin-right: 300px;
margin-top: 50px;
position: relative;
height: 200px;

}

#image {

margin-left: -600px;
width: 287px;

}

#image-two {

width: 231px;

}

#image-three {

width: 242px;

}

HTML...

<div class="gallery"
    ><img src="../images/templateone.jpg" id ="#image" class="image" alt=""
    /><img src="../images/templatetwo.jpg" id="#image-two" class="image" alt=""
    /><img src="../images/templatethree.jpg" id="#image-three" class="image" alt=""/>
</div>

It's so simple, and I've been afraid to ask, for fear of missing something stupidly simple. I've looked around online, and I simply cannot figure out why this simple margin is not working.

The effect I'm trying to get is that all of the images are in a horizontal line with large right margins separating them from the other images. Now that I have that done, I need to add a negative margin on the first image so that the last image starts in the center of the stage, and the other two are outside of the hidden to the left.

For some strange reason the first image does not want to go outside the image to the left. Help please!

Thanks in advanced!

PS end of the tags are in front of the tags to prevent a small space between the images that occurs if there is a line break in the code.

Answer 1

Firstly, change id="#image-three to id="image-three" in your HTML. Remove the # on image one and two also.

<img src="../images/templateone.jpg" id ="image" class="image" alt=""/>
<img src="../images/templatetwo.jpg" id="image-two" class="image" alt="" />
<img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>

Secondly, to get it how you described, just increase that negative margin.

#image {
margin-left: -920px;
width: 287px;
}

See - jsFiddle

Answer 2

remove # from ids in your html Code,

<div class="gallery"
    ><img src="../images/templateone.jpg" id ="image" class="image" alt=""
    /><img src="../images/templatetwo.jpg" id="image-two" class="image" alt=""
    /><img src="../images/templatethree.jpg" id="image-three" class="image" alt=""/>
</div>