Here is what happens. I have put the logo in a div (green border added for clarity) on the title ‘row’ (I am not using tables, this is simply the row of divs that are between the orange bar and the featured picture row). When I set the overlap here as hidden (see first picture), it behaves as I’d expect, effectively cropping the image to within the div area. However, when I set overlap to visible (see second picture), while it ‘overlaps’ correctly at the top and left side, it stretches the div box down and right instead of overlapping, messing up the layout.
I’m pretty sure this shouldn’t happen. So I can’t see where I went wrong.
I had shied away from using absolute positioning completely due to the fact I thought a browser window resize would mess everything up. Anchoring the absolute positioning to a different layout element solved that so thanks.
In case anyone sees this and has a similar problem – I’d say persevere with the second link above.
Thanks again – now to randomise the content of one of the sections!