Image Align

  • Owen Holland

    (@owen-holland)


    11 years 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="https://www.flickr.com/photos/98420871@N06/10980173923/" title="Screenshot 2013-11-21 16.13.03 by TBOwenHolland, on Flickr"><img src="https://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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • martcol

    (@hotmale)

    Do you have a link to the site?

    martcol

    (@hotmale)

    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.

    Thread Starter Owen Holland

    (@owen-holland)

    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 https://www.tbdowenholland.com

    Thanks

    Thread Starter Owen Holland

    (@owen-holland)

    https://www.tbdowenholland.com/equal-opportunity-and-diversity-policy/

    That is the page

    martcol

    (@hotmale)

    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.

    martcol

    (@hotmale)

    Try:

    #contentbox p {
  display: table;
}

    I think that will fix it in modern browsers.

    Thread Starter Owen Holland

    (@owen-holland)

    Worked a treat! Thanks so much!

    martcol

    (@hotmale)

    Great!

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

    Thread Starter Owen Holland

    (@owen-holland)

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Image Align’ is closed to new replies.