Image link cause another image link to be unclickable - html

Question

I have two image links that need to be centered with a little shifting.
My problem is that one link cause the other to be unclickable.
DEMO - The right one can't be clicked
HTML:
<div class="my_class" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
css:
#my_id1
{
left: 120px;
}
#my_id2
{
right: 120px;
top: -157px;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class
{
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img{
border:1px solid red;
}

Answer 1

Here is the modified code:
<div class="my_class" id="my_id1"> <a href="URL">
<img src="//placehold.it/200x150" />
</a>
</div>
<div class="my_class" id="my_id2"> <a href="URL2">
<img src="//placehold.it/200x150" />
</a>
</div>
And the CSS:
#my_id1 {
float: left;
left: 150px;
}
#my_id2 {
float:right;
right: 150px;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.my_class {
text-align:center;
position:relative;
display: block;
margin: 0px, auto;
}
img {
border:1px solid red;
}

Answer 2

You need to float those containers : http://jsfiddle.net/GbzSQ/5/
Your first div overlaps over the other, so you need to float them and then use margins to position them properly.
.my_class{
float:left;
width:200px;
}

Answer 3

The divs of the links are just on top of each other.
So the mouse does not "see the bottom link".
Try using display inline in the divs with defined width.

Answer 4

I would use some floats or display:inline-block 's.
I made an update of your Fiddle with the Floats.
http://jsfiddle.net/cfknoop/GbzSQ/7/
#my_id1 {
float:left;
}
#my_id2 {
float:right;
}
The wrapper needs to be cleared with an clearfix or something.

Answer 5

Try not to use negative positioning, it's bad practice and will cause issues such as this. Try defining the size of the containing divide, position that, then float the divs within this.
I'll put together a quick fiddle to show you.
http://jsfiddle.net/GbzSQ/23/
And here's the HTML:
<div class="container" id="container">
<div class="my_class1" id="my_id1">
<a href="URL">
<img src="//placehold.it/200x150" alt="1" />
</a>
</div>
<div class="my_class2" id="my_id2">
<a href="URL2">
<img src="//placehold.it/200x150" alt="2" />
</a>
</div>
</div>
And the CSS:
.my_class2 {
text-align:center;
float: right;
position:relative;
display: block;
margin: 0 auto;
}
.my_class1 {
text-align:center;
float: left;
position:relative;
display: block;
margin: 0 auto;
margin-right: 20px;
}
img{
border:1px solid red;
}
.container {
width: 440px;
height: 200px;
display: block;
margin: 0 auto;
}