Image float:left; problem

Try

float: left;
display: block;
clear: left;

Hey, thanks for the reply.
I tried the code you suggested. It did put one image below the other, but left the text where it was.

See here: https://img78.imageshack.us/img78/9506/problemuc7.jpg

Any suggestions?. The way you suggested would work, only the image and the text are in different containers. I could try putting them both in the same container and doing it that way but I have no idea how.

Heres the source code if it helps:

<div class="entry">
					<div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="https://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>

<p>test here i am</p>
<div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="https://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
<p>test here i am</p>
				</div>

Short of it is that with that markup, you can’t do what you want. Floating an element takes it out of the normal flow. So you can’t force the following paragraph down to the floating image.

You’ll need to encapsulate each paragraph and its associated image inside a div, and then float those div’s instead.

Otto is right. The paragraph is outside the div in your example.
Also, do you need the <p> tag? <div class="entry"> most likely has the style for the font.

Can you give us the url of the page? It’s easier to tell if we look at the html/css live.

Hey, thanks.

You’ll need to encapsulate each paragraph and its associated image inside a div, and then float those div’s instead.

Is there no other way to do this rather than putting <div id=”leftfloatingdiv”>CONTENT</div> in every post?.

Also, do you need the <p> tag? <div class=”entry”> most likely has the style for the font.

No, I don’t need it but I’m not sure how to remove it!. Its not in index.php where I thought it would be so it must be within wordpress somewhere. Any ideas?

The url to my test post with the image problem is: https://drinkingsouls.com/wordpress/2009/01/12/test/

Cheers guys, appreciate the help.

I will look into it and do some testing. It’s just a theme issue. Simply removing the <p> doesn’t do it, just tried… The solution is around the corner, hang in there…

Good news! You just have to add float left to your entry p style

.entry p {
margin: 0px;
padding: 0px;
float: left;
}

That seemed to be working really great for a moment there until I checked the same post in IE.
In IE it still has the text aligned alongside the first image.

In Firefox: https://img292.imageshack.us/img292/3288/fffq0.jpg (Displays Correctly)

In IE: https://img147.imageshack.us/img147/2449/iegz9.jpg

I really can’t think of any way around this. I could try putting the post images and text in divs so they could have more individual styles applied?
Have you any more ideas?
Thanks for this.

And that’s the reason why IE should be erased forever from the face of the Earth, and never be left to posterity to deal with…

Try adding the statement clear right, to see if it makes a difference in IE

.entry p {
margin: 0px;
padding: 0px;
float: left;
clear: right;
}

Let me know!

Ideally, I’d make it into an unordered list. The whole thing in a UL, and each image and description would be in it’s own LI. Then float the LI’s left.

Making CSS do what you want it to do is easier when you have the right structure to begin with.

And that’s the reason why IE should be erased forever from the face of the Earth, and never be left to posterity to deal with…

Try adding the statement clear right, to see if it makes a difference in IE

Tell me about it! IE has caused me so many problems with WordPress.
clear: right; didn’t make any difference. This is much more difficult than I thought.

Ideally, I’d make it into an unordered list. The whole thing in a UL, and each image and description would be in it’s own LI. Then float the LI’s left.

Have you had success doing this?. I’m up for trying but I’ll need a hand. I don’t know where the image and text are defined. There is no reference to the image in single.php or page.php
Would I have to mess with the core code?.

Thanks guys.

No messing with the core code. It’s just a matter of html + css.

Considering that you probably want to post regularly using this layout, you want to have the quickest workaround.

I was wondering if you enclose each block with image and text into another div, that will separate them. I can only test live in Firefox, but from what you have now, I was able to separate the two blocks. IE should behave similarly.

This way, you only have to add an extra div.

Try doing:

style.css
div.singleblock {float:left;}
of course, you call it whatever you want, and add other styling

and then, in the post

sorry I messed up by not using the backticks, I’ll retype it…

and then, in the post

<div class="entry">
<div class="singleblock">
<div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="https://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
<p>test here i am</p>
</div>

<div class="singleblock">
<div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="https://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
<p>test here i am</p>
</div>
</div>

Theoretically, this should work.

Forgot.. add clear:left; to that div’s style

I right now do this for every post putting a

<div style="clear:both">Image - Text - whatever</div>

around. This works fine and is not much work