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+!

  • fikirbozan

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

  • VitaminCM

    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.

  • http://websuccessdiva.com Web Success Diva

    Great tip, solved my new dilemna :-)

    Thank you!
    Maria Reyes-McDavis

  • http://WriteYourBook.Net Barry Morris

    Exactly what I was looking for!

  • http://cybersurge.org Michael

    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.

  • Pingback: Internet Marketing Blog Posts in Review from Marketing Masters Guide | Marketing Masters Guide

  • crazytaxi

    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?

  • Pingback: BlogBuzz July 26, 2008 | Webmaster-Source

  • Photographio

    Thank you.
    I’ll try it.

  • carolita

    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!

  • John Kolbert

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

  • http://www.robinmalau.com Robin

    Pretty, thanks!

  • Pingback: Cadulicious: ícones gratuitos, dicas de Wordpress, portfolio online e muito mais! | Cadu de Castro Alves

  • Pingback: john keegan dot org » links for 2008-07-28

  • Pingback: Corregir error de alinear imágenes en WordPress 2.6 - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo.

  • Pingback: Planeta WordPress » Corregir error de alinear imágenes en WordPress 2.6

  • Pingback: Image Wrap Løsning til Wordpress 2.6

  • carolita

    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.

  • Pingback: Problemas con la alineación de las imágenes en Wordpress 2.6 | Proyecto Aurora

  • Pingback: Dicas Wordpress - Alinhamento de Imagens em Posts Wordpress 2.6 - Wordpressbr.com

  • Pingback: Links for 29-07-2008 | Velcro City Tourist Board

  • http://MyLymphomaStory.com Brandi

    Thank you soooo much.

  • Pingback: Floating Image Change For Wordpress 2.6

  • Pingback: Handle Images Easily with a Quick CSS Update : ultimate geek girl

  • Pingback: WordPress Wednesday News: WordPress iPhone Upgraded, WordCamp San Francisco Registration, Simon Dickson Rocked the UK, WordPress Theme Directory, and 201,000 Blogs Using WordPress 2.6 : The Blog Herald

  • Pingback: WordPress Wednesday News: WordPress iPhone Upgraded, WordCamp San Francisco Registration, Simon Dickson Rocked the UK, WordPress Theme Directory, and 201,000 Blogs Using WordPress 2.6 | The Blog Herald

  • Pingback: WordPress News For The Week Of August 1st 2008 » The NMP Network

  • David Lau

    nice tips ,thanks you~

  • carolita

    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.

  • http://www.rickyjordan.com Ricky Jordan

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

  • Pingback: Individualized Counseling » Blog Archive » McDragon on “Align images right/left suddenly not working after upgrading to WP 2.6″

  • http://www.SEOAdsenseThemes.com SEOAdsenseThemes.com

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

  • Steven

    Quick and easy fix for this problem

    Good work!

    S

  • Heather

    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!!!!

  • carolita

    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!

  • http://www.marcush.de Marcus

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

  • J. Bentz

    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.

  • avtorentacar

    What I need.
    Thank you

  • Kudungga

    thanks a lot for sharing. Good luck for you

  • Pingback: Wordpress 2.6 - Images won’t align properly | eJabs

  • danielle

    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

  • Pauly

    Wicked! Thanks a bunch

  • Andrew

    Thanks so much!

  • Revital

    Thanks! Solved my problem in an instant!

  • http://xiawa.my Xiawa

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

  • Mari

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

  • Jeff

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

  • Jeff

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

  • dM5.1

    Posting just to say thanks for this easy fix!

  • http://www.selfdefenceforkids.com.au Matty

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

  • Lea Selley

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

    • Jeff

      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).

  • Bob

    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!

  • michael

    Perfect solution. thanks

  • http://www.astronyu.com astronyu

    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.