Image overlapping posts?

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="https://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
https://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=”https://yrphoto&#8221; 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 ?