A difference I see is that on the apt47 post, you have only a line of text, whereas on the other one all of the images have a big block of text. Would it still work there, with just one line of text?
I was experiencing the same issue on my site. What I did was to wrap the image in a DIV. This is how it looks in my WRITE panel:
This is the text from the post, and what follows is an interesting picture.
<div align="center"><img src="http://example.com/wp-content/images/sunset.jpg" alt="A beautiful sunset" width="200px" height="200px" /></div>
This is the text that follows the picture.
Very valid question… no it doesn’t. Stupid me 🙂 But anyway.. the problem still stands. Must be some very simple solution to this.
Ahh, yeah that just might work. Thanks NuclearMoose – I’ll give it a go now.
Moose man, wouldn’t using a class on the image do the same thing as the div? Besides, align="center" is not web standard any more. Deprecated.
I found this somewhere and it works like a charm for centering.
/* using 'class="centered' is much better than using align="center", being much more futureproof (and valid) */
img.centered { display: block; margin-left: auto; margin-right: auto; }
I don’t know if it applies here, but I found it a unique and successful way of centering an image. The comment is from whoever I snatched this bit of code from. I should have credited it…oh, well.
And fredrik, if you do this often, you might want to put a height in the style sheet div to help you space it out better, no matter how much text is included.
Lorelle,
You are totally correct about the align="centered" thing being deprecated. I used the posted code as is for two reasons: I didn’t feel like creating a class in my CSS and then uploading it. Yes, I’m LAZY and secondly, I like to use deprecated code because I want my site to crap out in the future. :p
Thanks for the heads-up!
That solution does solve the overlapping problem but only as long as the image isn’t set to align left – i’d like the text to wrap around the image – so i’ll need the image to have that property set. I would have thought that setting the div’s alignment to left instead would make the text wrap around it – but it doesn’t 🙁
As NuclearMoose has advised, you have to wrap the individual entry (with your pictures et al) in a <div> inside the <div class="post"> like <div class="entry"> (where you have used <span>, so that individual post entries will not flow into the one lying below.
Even in your blog, the two paragraph tags just prevent the picture from overlapping.
S.K
http://blog.cyberbrahma.com/
That span tag was just another try to solve the problem – unsuccessfully 🙂
Think I’ve set it up as you suggested now. I don’t get it though… It looks like I’ve got the same set-up as in your code… but my stuff still overlaps. Is it possible for you to post a large image and little text without overlapping kichu?
I’ve been trying to figure this out as well. My html/css is rusty and working with the kubrick theme.
this seems to works:
1. in your style.css add a new class:
.lefty {
float: left;
margin-bottom: 10px;
}
2. wrap your post with <div class=”lefty”></div>
3. my image tage looks like this:
<img src=”http://yrphoto” alt=”yralt” align=”left” style=”border: solid 1px #000000; margin-right: 4px;” />
which gives me a bit of space to the right of the image.
@setstaic that is not quite right with respect. A floated element must have its width defined to validate and prevent serious borkage *erm* instability across platform
@lorelle: How is fixing the height going to *space out* stuff? Presumably the content and image size are variable ?
