Need help creating boxes created as images

======================
Note: moved from another thread
======================

I've hit a wall, wonder if anyone can advise.

I've got the boxes created as images, and have created a div layer to go on top of them as text (not sure if all that is the right terminology, but hopefully you know what I mean).

http://realevaluation.com/test-page/

I am using absolute positioning to get things in the right place, but somehow my bottom two boxes are NOT quite in the right place, and I can't work out why. I thought I'd put the pics in as the same size and lined them up in the right spots ... ???

TIA

Code follows:

<div style="position: absolute; left: 232px; top: 229px; width: 400px; height: 261px;">
<img class=" wp-image-426 alignleft" title="acquire" src="http://realevaluation.com/wp-content/uploads/2012/06/FernBox.png" alt="" width="400" height="261" />
<div style="position: absolute; left: 17px; top: 29px; width: 184px; height: 222px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">acquire</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">in-house capability</span>
<span style="font-family: verdana,geneva; font-size: 18px;">custom tools</span>
<span style="font-family: verdana,geneva; font-size: 18px;">insight &amp; ideas</span>
<span style="font-family: verdana,geneva; font-size: 18px;">actionable answers</span>
</div>
</div>
<div style="position: absolute; left: 645px; top: 229px; width: 400px; height: 261px;">
<img class="alignright wp-image-428" title="read" src="http://realevaluation.com/wp-content/uploads/2012/06/HarakekeBox.png" alt="" width="400" height="261" />
<div style="position: absolute; left: 26px; top: 29px; width: 184px; height: 227px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">read</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">nuts &amp; bolts</span>
<span style="font-family: verdana,geneva; font-size: 18px;">commissioning</span>
<span style="font-family: verdana,geneva; font-size: 18px;">think pieces</span>
<span style="font-family: verdana,geneva; font-size: 18px;">genuine blog</span>
</div>
</div>
<div style="position: absolute; left: 232px; top: 533px; width: 400px; height: 261px;">
<img class="alignleft size-full wp-image-452" style="top: 1px; left: 1px; width: 400px; height: 263px;" title="learn how" src="http://realevaluation.com/wp-content/uploads/2012/06/ToitoiBox.png" alt="" />
<div style="position: absolute; left: 17px; top: 29px; width: 186px; height: 222px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">learn how</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">tips &amp; guides</span>
<span style="font-family: verdana,geneva; font-size: 18px;">workshops</span>
<span style="font-family: verdana,geneva; font-size: 18px;">seminars</span>
<span style="font-family: verdana,geneva; font-size: 18px;">e-learning</span>
</div>
</div>
<div style="position: absolute; left: 645px; top: 533px; width: 400px; height: 261px;">
<img class="wp-image-454 alignright" style="top: -5px; left: 1px; width: 400px;" title="about" src="http://realevaluation.com/wp-content/uploads/2012/06/JaneBox.png" alt="" width="405" height="267" />
<div style="position: absolute; left: 26px; top: 29px; width: 184px; height: 227px;">
<h1><span style="font-family: verdana,geneva; font-size: 36px;">about</span></h1>
<span style="font-family: verdana,geneva; font-size: 18px;">real evaluation</span>
<span style="font-family: verdana,geneva; font-size: 18px;">jane</span>
<span style="font-family: verdana,geneva; font-size: 18px;">contact</span>
</div>
</div>