1

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.

2 Answers 2

2

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

1

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; }
2
  • 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, 2011 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, 2011 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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