Need help? Check out our Support site, then


How to 'alignleft' 'aligncenter' 'alignright' on same row?

  1. I have trouble with some picture alignment. For example:
    http://ipistudio.wordpress.com/workshops/asian-festival-of-oriental-dance/teachers/

    I want the first 2 pictures on one row, then 3 small pictures on the second row, then the last 2 pictures on the 3rd row. The first pictures 2 large pictures look right. But then the next 3 smaller pictures should be aligned left, center and right on the same level. Then the last 2 pictures should be aligned similar to the first 2 large ones (ie. side-by-side). I think the main problem is that setting an image as 'aligncenter' won't allow it to share the row with other text or images. Since the small image designated as 'aligncenter' is pushed down to its own row, the ripple effect is that the other images become misaligned too. How can I fix it?

    [I read that I can drag-and-drop images within the 'visual' view during page construction but I can't seem to do that either...is it possible that some WP functionality gets disabled if I'm using old versions of Internet Explorer?]

    The blog I need help with is ipistudio.wordpress.com.

  2. You need table coding. Set the alignment of the three middle images to none, then switch the editor to HTML and use this:

    <br style="clear:both;" />
    <table style="border:none;">
    <tr>
    <td style="width:240px;border:none;padding:0;">
    IMAGE1 SHORTCODE HERE
    </td>
    <td style="width:240px;border:none;padding:0;">
    IMAGE2 SHORTCODE HERE
    </td>
    <td style="border:none;padding:0;">
    IMAGE3 SHORTCODE HERE
    </td>
    </tr>
    </table>

    In case you're unsure, the shortcode of each image is this part:
    [caption id=ETC ETC ETC[/caption]

    Explorer is a lousy browser. Download and start using a good one: Firefox or Safari.

  3. RE: FF or safari, I wish. I'm stuck using a work-issued PC with no admin rights to download a new browser.

    I'll try to set the images using a table. Thanks for the tips.

  4. Just FYI, Internet Explorer 6 and 7 are no longer supported by WordPress, which means that from now on they won't even try to stay compliant with them.

  5. Works great. Though I noticed the images align along the bottom of the table. In my case, even if the images are same dimensions, they will be offset one caption is longer and takes additional rows...

    Is there a way to force the images to align along the top of the table?

  6. You didn't have to use a table for the first row of images: the tricky part was the second row only. Anyway, now that you've added a table for those two images as well, change the alignment of the one to Left and the alignment of the other to Right, and turn these two:
    <td style="width:240px;border:none;padding:0;">
    to:
    <td style="vertical-align:top;border:none;padding:0;">

  7. Excellent. Thanks so much.

  8. I'm having fun learning and re-arranging the HTML code. So on another page I extended the table for 5 small images. It works but to make it clean, I'm trying to change dimensions of each image so they line up with matching heights.

    http://ipistudio.wordpress.com/performance-private-class/

    I have 2 tables now. The first table, I scaled the dimensions <in the HTML> so the heights match, but visually they don't actually match and there is white space between some of the images. The second table retains the original image dimensions as imported.

    Can I line up the images side-by-side with matching heights?

  9. First you need to delete this from the td tags:
    width:240px;
    It's not a general thing, it was used as part of the solution to your first question: useful only in that particular table.

    Now, re your new question,

    a) Delete this from each image code, because it means a default dimension (defaults are set in Settings>Media):
    size-medium

    b) Delete these, so that the widths will auto-adjust (otherwise you'd have to calculate them):
    width="100", width="150", etc.

    c1) If you want no space at all between the images, change the height of all of them to 83 (I'm talking about the first table, the one with the 5 images; 83 in this particular case is the height that will produce widths that completely fill your post column).

    c2) If you want a little space between the images, set the heights to 80 and change all of these:
    padding:0;
    to:
    padding:2px;

  10. Great, you teach me new tricks. I didn't know the width would auto-scale to match the height! It's a timesaver.

    I set it up to fit the body width and have a second version of the table which stretches beyond the body into the sidebar. Both look fine on this page because I don't have too many widgets in the sidebar. But are there any considerations that would disincline someone to have body elements stretch into sidebar?

  11. "the width would auto-scale to match the height".
    And vice versa.

    "are there any considerations"?
    Maybe: lousy browsers (that is, Explorer) might not display them correctly. But I'm a Mac user, so I cannot check this.

    "Both look fine on this page".
    That's questionable - to me they don't! The second row of images aligns well with the header image but not with the text column and the comment box, so it shows that this row is actually spilling over. I wouldn't do it, except maybe if I put it at the bottom of the page, with no comment box.

    Speaking of which, do you really need the comment form on that page when you've got a Contact page?

    And speaking of that, a plain email link is a gift to spam bots. Better use the WP contact form instead:
    http://en.support.wordpress.com/contact-form/
    (If you do that, then disable commenting on that page as it will be confusing.)

Topic Closed

This topic has been closed to new replies.

About this Topic