link on top half of page won't work - html

Question

I know this a rather specific question and basic html question, but it's been happening on a few of my pages now, and I'm curious as to what exactly is going on.
I have a series of div boxes lined up vertically on a page, each one contains a picture that is a link to a different page on the website. The problem is when I add more than 3 of these div boxes, suddenly all the links on above the bottom three stop working.
http://webstage.emich.edu/dining-new/locations/easterneateries.php
I've tried the same code in jsfiddle, as seen below:
.locationsbx {
position:absolute;
width: 540px;
height:70px;
z-index:5;
margin-left: auto;
margin-right:auto;
background-color: #363636;
margin-top:110px;
}
.primetriangle {
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: #CCC;
}
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 20px;">
<div class="primetriangle" style="z-index: 4;"></div> <img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/estreet.png" alt="" />
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 130px;">
<div class="primetriangle" style="z-index: 4;"></div> <img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" />
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top:240px;">
<div class="primetriangle" style="z-index: 4;"></div> <img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" />
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
<div class="locationsbx" style="position: absolute; width: 100%; height: 100px; margin-top: 350px;">
<div class="primetriangle" style="z-index: 4;"></div> <img style="width: 85px; margin-left: 5px; margin-top: -18px;" src="/dining-new/images/eateries/sunsetstripslogo.png" alt="" />
<div class="text" style="margin-left: 100px; margin-top: -35px; width: 430px;">text</div>
<div style="position: absolute; margin-left: 270px; margin-top: 45px; width: 320px;">
<img style="height: 35px;" src="/dining-new/images/open.png" alt="" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/menu.png" alt="" onmouseover="this.src='/dining-new/images/menu_hover.png';" onmouseout="this.src='/dining-new/images/menu.png';" />
<img style="margin-left: 2px; height: 35px; display: inline;" src="/dining-new/images/nutrition.png" alt="" onmouseover="this.src='/dining-new/images/nutrition_hover.png';" onmouseout="this.src='/dining-new/images/nutrition.png';" />
</div>
</div>
and it's working fine there- so I'm confused as to what might be some of the reasons why putting the code on the actual server would be causing problems with disabling the links.
Any thoughts/explanations would be super super appreciated
**NOTE: I am well aware that it is not in good form to have inline styles, especially when I have the external CSS sheet anyways. However, the inline styles are just there until I can resolve the actual problem with the links.
** ALSO: The link to the page is very obviously under construction still. I have been dealing with the disabled links over multiple pages now and am much more concerned with why they're disabling than the rest of the page

Answer 1

I went to check the source of your page you linked to and you're not closing the <div> with the class="locationsbx" on your page. I think you're doing in the code you pasted above but not on the actual page.
EDIT: Not really a complete answer. I would have just left a comment but I need 50 points for that, I don't have those.