[resolved] Image Align Issue (6 posts)

  1. wbjtk
    Posted 2 years ago #

    Hey all

    I'm using twenty ten.

    For some reason, the images on the pages won't align properly. I have set them to align right, but no luck. The first paragraph aligns just fine, but the next one will sit under the photo rather than beside it.

    Using firebug, the css says images with the align right property float right, but the words still don't wrap around fully.

    Not sure if the problem is because the photo sits inside the first p tag, so the next p tags sit below the photo. If this was why, how would I fix this in the css file so my client could change the photo without messing with the editor?

    Here is the link: http://demo5.quirkiwebsitedesign.com/vip-travel/destination-weddings/

    Thanks in advance to anyone who could help me understand this!

  2. Michael
    Forum Moderator
    Posted 2 years ago #

    it is not recommended to edit Twenty Ten directly, but rather to create a child theme for the customization.


    you have caused that problem yourself by adding the p tag to this line near the top of the style.css:

    h1, h2, h3, h4, h5, h6, p {
    	clear: both;
  3. wbjtk
    Posted 2 years ago #

    Thank you for finding that! Yes childthemes is on my list to tackle next.

  4. Maria Antonietta Perna
    Posted 2 years ago #

    I didn't test this, but try to add a new rule:

    .entry-content p {
     clear: none;
     max-width: 80%;

    It looks that p has a clear both rule that might affect the wrapping, and by decreasing the full width of the paragraph we might further ensure that it doesn't go below the image. Test if it works.

  5. wbjtk
    Posted 2 years ago #

    I just removed p from the headings so it doesn't have the clear and added it on the next line, applying my font rule. But thanks for that. I am still learning and I don't even know what clear means yet but I'm heading to google now to find out lol

  6. Maria Antonietta Perna
    Posted 2 years ago #

    Hi, obviously, if you aren't working with a child theme, I also recommend that you do. In any case, I've just applied the clear:none; css rule using firebug and the paragraphs aligned right away with the photo. This means that applying the style I suggested in the previous post is a good solution. As to what clear:both does, it's exactly the effect you're having at the moment: it keeps floated html elements from getting in the way from both sides. By adding clear:none, the paragraph allows for the floated photo to get in its way from the right side.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.