Wordpress Theory Lesson - Image Columns within posts with alignment?

Question

Trying to get my head round a request from a client, and thought I'd try to hivemind the solution a little bit.

The client requires a two column post layout, with images down the right and text on the left.

Now, that bit it relatively straight forward (he says, having not tried it yet), but the real trouble is the next requirement. The images in the left column need to align with the starts of paragraphs in the left column. I am struggling to figure this bit out.

EDIT

Each post might contain several paragraphs which may or may not have images that require aligning.

The backend needs to be free from manual HTML, as the client wishes to maintain the site themselves.

Answer 1

I'd have thought it's just a matter of formulating your HTML in a way that accomodates the image alignment requirement..

You could have two seperate elements, one for the post's image, one for paragraph(s) of content, and float them side by side. Add a wrapper around the two..

So you basically have two elements, side by side and a wrapper, eg..

+------------+
|+----++----+|
||    ||    ||
|+----++----+|
+------------+

If one of the two columns(floated elements) has a larger height, the wrapper extends to match that height, eg..

+------------+
|+----++----+|
||    ||    ||
|+----+|    ||
|      +----+|
+------------+

or

+------------+
|+----++----+|
||    ||    ||
||    |+----+|
|+----+      |
+------------+

And because the wrapper surrounds each result, the baseline of the image and paragraphs are always the same...

So your results then appear something like..

+------------+
|+----++----+|
||    ||    ||
|+----+|    ||
|      +----+|
+------------+
|+----++----+|
||    ||    ||
||    |+----+|
|+----+      |
+------------+
|+----++----+|
||    ||    ||
|+----+|    ||
|      +----+|
+------------+

Obviously real HTML elements don't look anything like that, but i hope the illsutration helps.. :)

Answer 2

This is more of a CSS question. You put your image tag into the paragraph (<p><img/>....</p>) and then use CSS to limit the text width and push the image out to the right:

p { padding: 0 200px 0 0; }
p img { float: right; width: 200px; height: 200px; margin: 0 -200px 0 0; }