WordPress.org

Forums

Image Align (10 posts)

  1. Owen Holland
    Member
    Posted 1 year ago #

    Hi guys,

    I know this is really basic stuff-but i'm struggling.
    I've been using align left for images to add some corporate detail. I have used this on several pages, all of which have aligned okay...except for one.

    <a href="http://www.flickr.com/photos/98420871@N06/10980173923/" title="Screenshot 2013-11-21 16.13.03 by TBOwenHolland, on Flickr"><img src="http://farm4.staticflickr.com/3707/10980173923_d96794eae7.jpg" width="500" height="227" alt="Screenshot 2013-11-21 16.13.03"></a>

    That is an image of what I am getting, in the text editor, nothing is different than the other pages, and in the visual editor every page looks different, so I can't pin point why this one isn't complying!

    Anybody know any CSS or anything that I could add? Thanks.

  2. martcol
    Member
    Posted 1 year ago #

    Do you have a link to the site?

  3. martcol
    Member
    Posted 1 year ago #

    Oh, and have you checked in the text editor rather than the visual editor to see if the code hasn't got jumbled up? In my experience this can happen if the page is edited a lot. It would just be a matter of looking at a section that is rendering how you want it to and comparing with one that has gone awry.

  4. Owen Holland
    Member
    Posted 1 year ago #

    Thanks Martcol,

    I have looked in both visual and text. It's in maintenance mode but i can briefly take it off if you want to take a look.

    Its http://www.tbdowenholland.com

    Thanks

  5. Owen Holland
    Member
    Posted 1 year ago #

  6. martcol
    Member
    Posted 1 year ago #

    I can tell you what I think the problem is.

    The images are floated to the left. When the p element has sufficient content to become taller than the image the next image behaves itself and floats nicely to the left of the containing element.

    When the paragraph has only one line, it does not have sufficient height to enable the next element (the img) to clear. Therefore, the second image snags and lines up with the right side of the image above it.

    I will look some more and see if I can fix it.

  7. martcol
    Member
    Posted 1 year ago #

    Try:

    #contentbox p {
      display: table;
    }

    I think that will fix it in modern browsers.

  8. Owen Holland
    Member
    Posted 1 year ago #

    Worked a treat! Thanks so much!

  9. martcol
    Member
    Posted 1 year ago #

    Great!

    I'm no expert but staring at code is a skill I've honed to perfection!

  10. Owen Holland
    Member
    Posted 1 year ago #

    Just realised that all the images on my site have re-aligned themselves to the left, is there a way that I can isolate this code to particular pages? I've had a play around but haven't come up with anything that I can use.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.