If you’ve already upgraded to WordPress 2.6, you might have noticed that WordPress handles images a little differently than the WordPress 2.5 branch and below.  The main change is that you can now use the alt field to add a caption, which will wrap a sort of caption below the image.

The problem I’ve had with this new setup is that it can cause some problems when trying to float your images due to the new class=”alignleft”, class=”alignright” or class=”aligncentered” elements.  The image will still move, but I’ve found the text won’t wrap properly around the image.

Thanks to a recent post from Sadish over at WP Lover, it looks like this problem can easily be fixed by by adding some code anywhere into your CSS stylesheet:

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}

This way the images should float and the text should wrap properly.  Thanks for posting the easy fix Sadish!

Kyle Eslick is WordPress enthusiast who took his passion for WordPress to the next level in 2007 by launching WPHacks.com as a place to share hacks, tutorials, etc. Connect with Kyle on Twitter or Google+!

  1. fikirbozan says:

    This is the post what i was looking for. thanx a lot… ? had a problem like this and solved via this great tutorial…

  2. VitaminCM says:

    This has been killing me since I upgraded. I’m using a custom theme and it has been broken since I upgraded. This helps fix it a little, but it’s still broken. Thanks, I’m sure a lot of people could use this help.

  3. Great tip, solved my new dilemna :-)

    Thank you!
    Maria Reyes-McDavis

  4. Barry Morris says:

    Exactly what I was looking for!

  5. Michael says:

    This is the kind of thing that makes me wish I stuck with the long term support versions of WordPress, changing things like this are pretty major and the fact that (at least to me) it doesn’t seem to be any real reason for it is ridiculous.

    Thanks for the tip though, I will be adding this code and hopefully it will work just as well for me as it has for everyone else.

  6. crazytaxi says:

    no. this doesn’t really work, either. the app is broken. it’s like there’s this giant tremendous elephant in the room that no one is mentioning. Something as simple as plain old 1999 image placement…. could we get some HTML tables to hold pictures?

  7. Photographio says:

    Thank you.
    I’ll try it.

  8. carolita says:

    Hi! I’m using a wordpress “letterhead” template, and no matter what I paste in my style.css file, i can’t seem to get my text to wrap around my image. I’ve got version 2.5.1, and it automatically asks me if I want to align my image left or right, etc., but it never takes, not even after inserting the code above.

    What am I doing wrong? I did manage to get a wraparound text by moving the class=”alignleft part of my image code to just after the <img (instead of after the width and height indicators), but that syntax change, while it resulted in wrapping the text, made the image disappear, and also bleed into the top of my next post.

    This is an example of what an image code looks like in my version of wordpress:
    <img src=”http://newyorkette.com/wp-content/uploads/2008/07/hamburger_450.jpg” alt=”” title=”hamburger_450″ width=”450″ height=”401″ class=”alignleft size-full wp-image-675″ />

    It should wrap around, but it doesn’t.

    Can anyone help? This is what the image coding looks like in my letterhead stylesheet:
    a img { border: none; }
    That’s all there is! (until I pasted the code suggested here in, which didn’t change things for me).

    Would love some help! Been dying to have wraparound text for years!

  9. John Kolbert says:

    Wow, this couldn’t come at a better time! Thanks for the tip, I’ll be using it in about five minutes

  10. Robin says:

    Pretty, thanks!

  11. carolita says:

    Okay, I got some wrap around finally, but now I have a problem with the last photo, or the bottom of tall photos overlaying the footer of my post (the part that says, “leave a comment”, and even overlaying part of the header of previous post below it.

    Does anyone have a code fix for that?  I think it’s something to do with div clear, but not sure how that works.

  12. Brandi says:

    Thank you soooo much.

  13. David Lau says:

    nice tips ,thanks you~

  14. carolita says:

    Well, nobody had an answer for me, so I’m assuming nobody knew, so I’ll tell you what I found out for preventing the wrap around text from making the photos and text overlay the previous post header, etc.  I got a clearer code: <br style=”clear: both;” />You just put that at the end of your post, and you won’t have any problems with the text and/or photo wandering into places it oughtn’t.

  15. Ricky Jordan says:

    THANK YOU for this wonderful tip.  I just switched to WordPress and this solved my issue.  Worked well with the CopyBlogger Theme.

  16. This is exactly why we should always wait for X.X.1 releases before updating WordPress in crucial websites.

  17. Steven says:

    Quick and easy fix for this problem

    Good work!

    S

  18. Heather says:

    Carolita (#14), I was having the exact same problem and your solution fixed it. I really, really appreciate it since it was driving me nuts. Thank you!!!!

  19. carolita says:

    Heather (#18), I’m glad to help! I posted that question in so many places, and nobody had any time to answer me. (I was beginning to wonder if this was a real forum!) Glad to know I actually reached someone, and was helpful too! :)
    Happy blogging!

  20. Marcus says:

    Thanks for this tipp. This is what I’ve searched for.

  21. J. Bentz says:

    Hey… I’ve been noticing that when I upload images below a width of 232px that the images have been autoformatting to that width. Most of the images in blog posts on my site have done this, if you would be willing to take a look (click my name link).

    Any tips or a stylesheet code fix you can provide me would be a great help. Thanks a lot man.

  22. avtorentacar says:

    What I need.
    Thank you

  23. Kudungga says:

    thanks a lot for sharing. Good luck for you

  24. danielle says:

    it fixed the issue on my blog, but it didn’t fix the issue in my RSS feeds. email is still showing images to the left, but they are fine and on the right on my site. do you know why this is? can u email pls :) if u know

  25. Pauly says:

    Wicked! Thanks a bunch

  26. Andrew says:

    Thanks so much!

  27. Revital says:

    Thanks! Solved my problem in an instant!

  28. Xiawa says:

    This is exactly what i m looking for :D
    thanks a lot!

  29. Mari says:

    My goodness, thank you for this post.
    Thank you, thank you thank you

  30. Jeff says:

    Works in Firefox great but doesn’t work in IE.

  31. Jeff says:

    My apologies.. works fine in IE and Firefox. My page was cached. Thx!

  32. dM5.1 says:

    Posting just to say thanks for this easy fix!

  33. Matty says:

    Thanks so much Kyle. I agonized over this for hours until I came across your post. You are my new god.

  34. Lea Selley says:

    What css file are we supposed to edit? I’ve got 50 it seems!

    • Jeff says:

      Lea,
      You should only have one css stylesheet. Are you in the actual editor? It’s typically the last one in the list (though not always).

  35. Bob says:

    Thanks Kyle…(two years later) your post is still helping people like me! Text “was” wrapping fine in my newer WordPress versions until I happen to change to a new theme yesterday, then it quit wrapping. That bit of code in your post fixed it!!!

    Thanks a million!

  36. michael says:

    Perfect solution. thanks

  37. astronyu says:

    Great tips. I was directed to here from one of the topic on wordpress support.
    Seems like the code you’ve given fixed my problem with wrapping post around the image.

    However, can you perhaps share how to make the caption of the image shows as well? I can see it clearly in the editor the image and its caption showed just nice but when the post is published, the border around the image and caption were gone.

Trackbacks/Pingbacks »

  1. Internet Marketing Blog Posts in Review from Marketing Masters Guide | Marketing Masters Guide says:
  2. Cadulicious: ícones gratuitos, dicas de Wordpress, portfolio online e muito mais! | Cadu de Castro Alves says:
  3. Planeta WordPress » Corregir error de alinear imágenes en WordPress 2.6 says:
  4. Problemas con la alineación de las imágenes en Wordpress 2.6 | Proyecto Aurora says:
  5. Dicas Wordpress - Alinhamento de Imagens em Posts Wordpress 2.6 - Wordpressbr.com says:
  6. WordPress News For The Week Of August 1st 2008 » The NMP Network says:
  7. Individualized Counseling » Blog Archive » McDragon on “Align images right/left suddenly not working after upgrading to WP 2.6″ says:
  8. Wordpress 2.6 - Images won’t align properly | eJabs says: