Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 - More Info

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.

share|improve this question
add comment

2 Answers

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.. :)

share|improve this answer
add comment

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; }
share|improve this answer
    
I'm not sure it is just a CSS question. I need to align several images to several paragraphs, but have the backend management free from manual HTML –  Mild Fuzz Mar 3 '11 at 11:39
1  
It doesn't require manual HTML. What it may require is to train the client on how (and where) to insert the images into the editor (wrapped in a paragraph or before paragraph). Or alternatively you may need to write CSS that caters for a few different possiblities of where the client inserts the image. –  wyrfel Mar 3 '11 at 16:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.