set height div to other element height on page - css

Question

I've created this content with drupal. Below the image you have a next page button.
I also set a button for next image on top of the image (pager) so if the visitor clicks on the image it would go next page.
How can i stretch the link over my image, drupal generated 2 divs and the images are variable in height.
<div class="view-content">
<div class="container12">
<div class="pagerfoto column12">
<h2 class="element-invisible">Pagina's</h2>
<div class="item-list">
<ul class="pager">
<li class="pager-next first">
›
</li>
<li class="pager-last last">
</ul>
</div>
</div>
</div>
<div class="container12">
<ul>
<li class="views-row views-row-1 column12">
<div>
<div class="views-field views-field-field-image">
<div class="field-content">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</div>
</div>
</li>
</ul>
</div>
site
.pagerfoto{
z-index:1;
position:absolute;
padding-top:1.71429em;
display:block;
}
.pagerfoto ul li.pager-next a{
display:block;
margin:0 auto;
padding:0;
text-indent: -9999px;
}
This is the current css i use for ma a label.

Answer 1

Try giving this css:
.view-project11 {
position: relative;
}
.item-list {
left: 50%;
position: absolute;
top: 50%;
}

Answer 2

If I understand your question correctly you would like the user to click on the image and then the page will go to the next image.
wrapping your image in the tag will allow you to do that.
example
<a width="900" height="675" href="/test/project11?page=1">
<img width="900" height="675" alt="" src="http://www.logicaarchitectuur.be/test/sites/default/files/styles/gallery_large/public/desert.jpg?itok=J6D4TAEL" typeof="foaf:Image">
</a>