Image Align Issue

  • Resolved Jessi

    (@wbjtk)


    12 years, 2 months 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!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    (@alchymyth)

    12 years, 2 months ago

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

    http://codex.ww.wp.xz.cn/Child_Themes

    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;
......
    Thread Starter Jessi

    (@wbjtk)

    12 years, 2 months ago

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

    Maria Antonietta Perna

    (@antonietta456)

    12 years, 2 months 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.

    Thread Starter Jessi

    (@wbjtk)

    12 years, 2 months 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

    Maria Antonietta Perna

    (@antonietta456)

    12 years, 2 months 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.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Image Align Issue’ is closed to new replies.