======================
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>

where to begin....

first off, move your styling out of the HTML and into CSS it will simplify things. For example, you have

<span style="font-family: verdana,geneva; font-size: 18px;">in-house capability</span>

so if you want to change the font-size, you will have to edit 16 lines of code. If you changed it to

<span>in-house capability</span>

you could add a CSS Insert of

span         {font-family: verdana, geneva; font-size: 18px;}

however that would apply to ALL the spans on the page. better to give each div a class like my_boxes' so you could code the CSS Insert as

.my_boxes         {font-family: verdana, geneva; font-size: 18px;}

now you could change one line and effect 16 locations in the HTML

looking at your code, I would do that with the images, all the div's. I'd move everything into CSS I could.

You also have multiple H1's which is bad for seo and then you style them - why use the H1 if you are going to set the font size anyway?

I could go thru the code and set it up so it would work the way you want, but it would take more time than I have to give for free.

Reduce the clutter and it may become simpler to accomplish what you want to do.