When you want text under an image give the image a new class, such as clear. In the css make a
.clear { clear: both;}
And then you should use
<img src="" class="clear" />
Not sure, but might this force the text to go below the image? I would have to try it on a layout to see, but try it.
Many themes come with the classes “alignleft” and “alignright” already set in the css. When you want to wrap text around graphics in a post, you simply use the appropriate class within the post to move the img link where you want it.
If your css doesn’t have those classes natively, add them:
.alignright {
float:right;
}
.alignleft {
float:left;
}
Try that, let us know how it goes (and in general, you shouldn’t need to use “clear” anywhere for that….)
I know this is an old discussion, but I’d like an answer to this as well.
With the mandigo theme, neither of the above ‘fixes’ seem to work. The stylesheet includes the .alignright and .alignleft classes, but when used in the code for an image (as in <img class=”alignleft” src=”…” /> it does not work. The text refuses to wrap around the image.
I’ve also tried the opposite fix, with having text wrap enabled, and using the .clear class for an image. This doesn’t work either.
Does anyone else have a solution? I just want to be able to decide when I want my text wrapped around images in a post, and when I don’t.
Here is all the code for images in style.css.php:
/* Begin Images */
.png { behavior: url(<?php echo $stylesheet_directory; ?>/js/iepngfix.htc.php?blank=<?php echo $stylesheet_directory; ?>/images/1x1.gif); }
p img { max-width: 95%; }
.entry img {
float: <?php echo ($mandigo_nofloat ? 'none' : ($mandigo_floatright ? 'right' : 'left')); ?>;
margin: 3px <?php echo ($mandigo_floatright ? 0 : 10); ?>px 3px <?php echo ($mandigo_floatright ? 10 : 0); ?>px;
<?php if (!$mandigo_noborder): ?>
background: #fff;
border: 1px solid #333;
padding: 3px;
<?php endif; ?>
}
img.nofloat, img.nowrap, .nofloat img, .nowrap img, .smallattachment img, .attachment img, .entry img.wp-smiley { float: none; }
.entry img.wp-smiley {
border: 0;
padding: 0;
margin: 0;
background: transparent;
}
img.noborder {
background: inherit;
border: 0;
padding: inherit;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
float: none;
}
img.alignright, img.alignleft {
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
Bump.
No-one has an answer to this?
I asked Tom, the author of Mandigo.
This is his answer:
Hi Christoph,
You sure can! The best way to do this is to have text wrapping turned on by
default, and selectively apply the nowrap class to the images around which
you do not want text to wrap, eg: <img src=”” alt=”” class=”nowrap” />
Hope this helps,
Thanks for choosing Mandigo!
tom
