problems with text and photo layout

  • Unknown's avatar
    intermediatelandscapes · Member ·

    hi, i’m having trouble solving a layout problem on my faculty page (http://intermediatelandscapes.com/faculty/). Depending on what zoom size you’re browser is at (usually at a smaller zoom), the photos and text become misaligned, the photo riding up underneath the preceding text instead of recognizing the line breaks i’ve had to manually put in the html so that it doesn’t happen.
    so i want each professor and bio to show up underneath each other, aligned. but depending on the zoom, some become indented and the layout goes crazy. i’ve put in line breaks but it is really frustrating because depending on what computer you are viewing the page from, it changes, you might see it ok, you might not. how do i make sure it is always aligned correctly? also, wordpress has this really annoying thing that it only keeps the manually edited code, such as line breaks and horizontal lines, when you view it in html mode; as soon as you switch to visual, these are stripped and you have to start all over =(((
    please help!!
    thank you so much

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it. If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    • Align-left means position left, with the rest of the content wrapping around the right side of the image.
    • Align-right means position right, with the rest of the content wrapping around the left side of the image.
    • Align-center means position center, with no wrap-around (= the rest of the content below the image).

      • Note 1: To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
      <br style="clear:both;" />
      Note 2: If you want two images to be side by side on the same line start by setting the alignment of both images to left.

  • Unknown's avatar
    timethief · Member ·

    For more on formatting line breaks, paragraph breaks and blank lines please see: http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

  • Unknown's avatar
    intermediatelandscapes · Member ·

    it works, thank you so much!!

  • The topic ‘problems with text and photo layout’ is closed to new replies.