Support » Fixing WordPress » Problem with aligning images and text

  • I have several images and for each image I want to add some text. The length of this text can vary from several words to several sentences.

    Also I want to add this text to the right of each image, so it would look like this:

    image1 text1
    image1
    image2 text2
    image2
    image3 text3

    All of these images are left aligned
    But really for some reason all the text moves upper, so it looks like this:

    image1 text1
    image1 text2
    image2 text3
    image2
    image3

    though in html code text2 comes just after image2, text3 – just after image3 etc.

    So how I can easily align images and text according this pattern (images to the left and text to the right) without using additional <table> or <div> tags?
    Is there any easier way?

    Thanks a lot!
    P.S. I use “Twenty Twelve” theme.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi Arti_rus,

    Without looking at the actual code, it is hard to imagine how you achieved that, but my suggestion would be to write something like:

    <ul>
      <li>
        <ul>
          <li>image1</li>
          <li>text1</li>
        </ul>
      </li>
      <li>
        image1
      </li>
      <li>
        <ul>
          <li>image2</li>
          <li>text3</li>
        </ul>
      </li>
      etc etc
    </ul>

    if you could post an example page, we could have better ideas and come up with better solutions 🙂

    Thread Starter Arti_rus

    (@arti_rus)

    Hi Ryan!

    I’ve prepared this case which I am talking about here:
    http://www.skipjack.ru/?p=396
    It is just for better understanding what do I mean.

    In the first example (1. Images are aligned center)
    there are 3 images which are aligned center and three parts of text (test1, test2, test 3), each of it comes just after corresponding image (image 1, image 2, image 3). Everything seems fine for me.

    The only thing I want to change is to move text from the place under the images to the place to the right of the images.

    In the second example (2. Images are aligned left) I made nothing more but only aligned all three images left. This method works good if the text is rather long and is longer than image, but for short texts it doesn’t work. For some reason all the texts move up to the right of the first uimage. Also the third image also moved to the right.

    This is not what I wanted to do. This is something rather strange.
    I wanted to make something like the third example (3. Table-based workaround), i.e. images to the left and corresponding texts to the right, each text corresponds to the only image and vice versa.

    I suppose that there is some method which uses <table> or <div> structures, but maybe there is something more elegant to implement my idea?

    Please check this code; I quickly created this for you and you should be able to get some ideas.
    http://pastebin.com/2YGaVNFY

    And the result will look something like below.
    http://s15.postimg.org/psdb1kdwr/image.png

    Hope that’s what you want to achieve.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with aligning images and text’ is closed to new replies.