Category: Software

I run or administer several WordPress based websites including this one. For the the last week I slowly began upgrading these sites from WordPress 2.5 to 2.6. The upgrade for me and these sites have been very easy. None the less, you should always do a backup before doing an upgrade.

I am writing this post because I noticed a change in how WordPress handles floating your images from version 2.5 to 2.6. If your using a custom WordPress theme and floating your image to the left, right, or center, you may notice that your text dose not wrap around your image like it used to. This is due to new class elements that are required in your CSS. You wont notice any of these image floating issues if your using the default WordPress theme. But many people are using custom themes. After plenty of troubleshooting and reading online about this I finally discovered the solution and thought I would share it. Just add the following code below anywhere to your CSS file for your WordPress Theme.

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.aligncentered, div.aligncentered {
text-align:center;
margin:0 auto;
}

Presto, that should resolve all your image flowing issues with the new wordpress 2.6.

Shortly after drafting this post up I discored I had been beaten to the buch by HackWordpress.com and WordPressrocks.com.

UPDATE: How to display the CAPTIONS for the image properly

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Add this to the end of your themes CSS.