Okay, I'm going spastic over this. I'm using Cutline 1.4 - 3 Column Split.
The code for images is like this:
/*---:[ image styles ]:---*/
.entry img { }
.entry img, .entry .gallery img { border: 1px solid #fff; margin: 0.1em 0; }
.entry img.left, .entry img.alignleft { padding: 3px; margin: 0.5em 15px 0.5em 0; float: left; clear: left; }
.entry img.right, .entry img.alignright { padding: 3px; margin: 0.5em 0 0.5em 15px; float: right; clear: right; }
.entry img.center, .entry img.aligncenter { display: block; padding: 3px; margin: 0 auto 1.5em auto; float: none; clear: both;
.entry img.off { padding: 0 !important; border: none !important; }
.entry img.stack { clear: none !important; }
.entry div.alignleft { text-align: left; float: left; }
.entry div.alignright { text-align: right; float: right; }
.entry div.aligncenter { text-align: center; margin: 0 auto; }
}
.entry div.wp-caption {
border: 1px solid #a2a2a2;
text-align: center;
background-color: #333333;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.entry .wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.entry .wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
.entry .gallery { margin: auto auto 15px; }
.entry .gallery .gallery-item { margin: 0 0 0.6em; }
.entry .gallery .gallery-icon, .entry .gallery .gallery-caption { margin: 0; }
.entry .gallery .gallery-caption { margin: 5px; font-size: 0.8em; line-height: 1.3em; text-align: left; }
.tagged { padding: 0.4em 0 0 0; background: url('images/hr_tag_sep_gold.gif') no-repeat; font-size: 1.2em; line-height: 1.6em; color: #a2a2a2; clear: both; }
.tagged a, .tagged a:visited { padding: 0.25em; color: #a2a2a2; text-decoration: none; }
.tagged a:hover { color: #fff; background: #333; text-decoration: none; }
.add_comment { display: block; padding: 0 0 0 20px; font-weight: bold; float: right; }
.navigation { width: 500px; font-size: 1.4em; float: left; }
.previous { padding: 0 20px 0 0; float: left; }
.next { float: right; }
.clear { width: 500px; height: 1px; margin: 0 0 5.0em 0; clear: both; }
.rule { background: url('images/hr_tag_sep_gold.gif') no-repeat; }
.flat { margin: 0 0 2.0em 0 !important; }
.whitespace { margin: 0 0 3.5em 0 !important; }
This wasn't working for me as to center images with a caption underneath it. I read up on these forums here and tried to just replaced all the bunch with default WP theme which is pasted many times over here. But one I used it it messed up my code for tags and the previous posts and more. So, I replaced it again with the original code.
But now, all of the left aligned images has the text below it, as opposed to on the right side continuing down. I've tried removing the image and placing it back in, left aligned, yet the text is not wrapped around.
What the heck am I doing wrong here? Is there something I can do to fix both of these things? I'm a little more concerned of getting my text wrapped around, but being able to center an image with a caption would be a huge bonus.
Thanks you all.