Wrapping Text Around an Image

Put all that stuff on the same line.

Here is exactly what one of my last posts looks like in the edit box:
<div class="img-shadow"><img src="https://www.tamba2.org.uk/T2/pix/chaos11.gif" alt="" /></div>
Apparently it drives the internet. I"ve just read somewhere that it was the people wanting

Not that the image stuff is all on one line and that there is then a linebreak before the text.

actually, it is on one line in the code itself–I just spaced it that way to make it readable here. but thanks for the thought.

(this is another example, however, of something that doesn’t make sense to me in that tamba2 page–what difference does it make whether code is on the same line?)

aha! fixed the problem. Podz, I noticed that your code doesn’t contain an align property in the image tag, while mine did. Now that I’ve removed it, the text is wrapping.

It looks like this was entirely my fault, as the tamba2 page does not include any alignment in the image tag itself.

Thanks for the help, Podz.

Glad it’s all working ??

You have the image floating to left in the CSS but alligned to right in the HTML, change the HTML into:

<div class="img-shadow1">
<img src="URL">
</div>
<div class="clearer"> </div>


and it will works fine.

Bye

hey podz, how can i get my site’s URL to be linked from my name on the right hand column of this page? When I look at my profile page, I don’t see a place to enter a URL….

I am having all kinds of trouble wrapping text, can someone please help?

Here is my post:
<div class=”img-shadow”><img src=”https://www.thebenjies.com/wp-images/Hawkeye.gif&#8221; alt=”Hawkeyes” /><div class=”clearer”> </div>
I can’t believe it, maybe I can. Iowa takes the top team in the nation into overtime, but Northwestern takes Iowa into overtime and we lose. I’ve lost all hope!</div>

Here is my result
https://www.thebenjies.com

This isn’t help for the text-wrapping (which I always have problems with myself), but if you include the image width in the div tag, like so:
<div class=”img-shadow” style=”width:136px;”>
then the image shadow will sit where it’s supposed to.

@benjellos
<div class="clearer"> </div>
Take that line away.
You might need it after the text if the text is shorter than the image, but for now, just remove it.

Still having no luck with this, made some adjustments but still not wrapping.

<img src=”https://www.thebenjies.com/wp-images/Hawkeye.gif&#8221; alt=”Hawkeyes” />I can’t believe it, maybe I can. Iowa takes the top team in the nation into overtime, but Northwestern takes Iowa into overtime and we lose. I’ve lost all hope!

benjellos – I’m sure you are going to say YES!!! but are you sure you have followed everything on that page ? It does work – honestly it does. I use this technique a lot, and the latest post I have has code the same as in the second post above.

This is what I added to my layout.css

div.cent {
text-align: center;
}

div.clearer {
clear: left;
line-height: 0;
height: 0;
}

.img-shadow {
clear: both;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 15px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

.p-shadow {
width: 90%;
float:left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 30px !important;
margin: 30px 0 0 8px;
}

.p-shadow div {
background: none !important;
background: url(images/shadow.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}

.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}

Do you want to edit that top post that you have now ?
I can see the code and once it’s in, if it does not work I’ll try and figure why not.

(I’m online and checking your site now)

You can take a look if you wish.
I’m sure it’s something easy that I’m missing.