Display text to right of image, and keep text remaining indented after image

Question

I'm looking to create a simple WordPress page that will display several images, along with some descriptions.

This page is for a customer who would like to update it on her own in the future. She has no familiarity with HTML or CSS.

I'm using a child theme based on "Attitude", although I think this issue would apply to most themes.

The layout I'm hoping for is one where an img is given the class "alignleft", to which I've appended the margin-right to be 50px.

So, it looks gorgeous as long as the text is beside the image. But, once the text gets below the image, it wraps back to the left of the page... just as it should, I suppose! :) Only, for my page, I'd like for the text to stay "indented", even past the image.

The kicker is that the images are not all going to be the same height or width. Although the height and width dimensions will be between 100px and 300px in almost every case.

Here's a visual:

WHAT I'M HOPING FOR:

---

---

WHAT I'M GETTING:

---

Things I've already considered are...

1. div's. If it were just me updating the page, div's would be super easy to implement. But I don't want her to have to do any HTML. (Maybe I could make a template. Hmm...)

2. Tables. I feel like maybe this isn't ideal because of the variable widths of the images. I suppose I could set the alignment of the "images" column to be "right", and then set cell padding to 50px on the right side.

3. A NextGen Gallery. If I do this, then I lose the ability to have bullet points in the text part (since the "Description" section of NextGen photos doesn't appear to handle that sort of thing).

4. Adding a margin-bottom to the .alignleft class. But, again, the images will be different heights AND the paragraphs will be different lengths.

Okay, that's about it. Let me know if

• I missed any important info in my description

• I'm simply making this way harder than I need to

Thanks!, Chris

Answer 1

You know, I think I'm on to something here. It may not be the most eloquent solution. But I think it's going to work. I'm going with tables!

First off, I have the TinyMCE WordPress plugin installed, so adding tables using WordPress's visual editor is easy enough for anyone to do.

I've added the following CSS to my child themes style.css file (Again, I'm using a child theme of Attitude):

.entry-content table tr td { width:auto;text-align:justify;vertical-align:top;}

.entry-content table tr td:first-child { width: 36%}

.entry-content table tr td:first-child img {width:100%;height:auto;}

I might make a few tweaks. But otherwise, I think this'll work pretty well.

The images will now be the same width. Which is great. My friend can now upload images of different sizes (again, probably between 100px and 300px in height and width), and the CSS will take care of formatting. Huzzah!