Move Linked Heading From Top of Image to Right of Image

I’m using CSS to layout a linked heading above content (refer to Holiday Almond Bars).

The downside to using the CSS method is that if the heading wraps to two lines, the image moves down with it and the first line of the linked heading moves slightly to the right, which makes this visually undesirable.

Is there a way to override this with CSS to prevent the image from moving down if a heading wraps to two lines and the first line of the heading from moving to the right? I already tried ‘h2:first-line’ and that didn’t seem to make any difference. Now if the heading’s line is only one line, then the movement of the image and the heading isn’t a problem.

The easiest way to go about it would be to take the image out of the HTML altogether, and call it as a background image with CSS. That way you can be sure that it always aligns to the top-left of the block and doesn’t interfere with anything else. Just make sure you set a min-height on the block to ensure that you have enough space.

Setting it to a background is not an option, in this case.

[font=verdana]Why not?

Another option would be to put the image as the first item in the <div> and float it left. Again, that would ensure that it appeared in the right place.

Quite honestly, I’m looking at your code and I haven’t got the faintest idea what it’s doing or how it gets where it does. But then when I see things like

    <div class="blogrecipes">

	







			<div class="items-row cols-1 row-0">
		<div class="item column-1">
		

(reproduced with white space intact) with class names that don’t appear to be used for anything at all, I start to feel slightly sick and suffering from CMS-induced fevers that sap me of the will to live…[/font]