Inline float image messing with paragraph margin

[PowerUp]

hi, here are my codes.

html

<div id="content">
<p><div class="imgwrap floatright"><img src="#*$!.jpeg"></div>This is a bunch of text about widgets. This is a bunch of text about widgets. This is a bunch of text about widgets. This is a bunch of text about widgets. </p>

<p>This is about green widgets. This is about green widgets. This is about green widgets. This is about green widgets. This is about green widgets.</p>

</div>

In my CSS,

#content p{
margin: 20px 0 0 10px;
}

.imgwrap {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: 1px solid #000000;
}

.floatright{
float: right;
}

My problem is, when I put the picture at the beginning of the 1st paragraph, the paragraph doesn't start with a left margin of 10px. It starts at 0px. The 2nd paragraph behaves like normal and start at 10px margin. This makes the alignment of all the paragraphs not in a straight line.

Can anyone help? Thank you.

[encyclo]

You cannot enclose a

div

within a paragraph, so with the current code the text after the div is not enclosed by the

p

. Check the HTML validator and you'll see the error.

You need to switch to using a

span

rather than a

div

to fix the problem.

[Xapti]

There's no need to have a div (or other container) around that image anyways. Just set float and border style to your image.

Ps are a strange thing in that they are designed to self close when they encounter some new content. By that I mean block-level content.

Because of this, another solution (worse though) would be to just use a Div instead of a P.
And like encyclo seemed to be saying, you could use a span instead of a div, since images are inline.

[edited by: Xapti at 7:49 pm (utc) on May 23, 2007]

[PowerUp]

hi guys, the reason why i used a div is because so that later on I can add some text to go with the picture. I want my content to display like this, with the picture float right.

Content Content Content Content Content xx picture xx
Content Content Content Content Content xx picture xx
Content Content Content Content Content xx picture xx
Content Content Content Content Content xx picture xx
Content Content Content Content Content text for pict
Content Content Content Content Content Content Conte
Content Content Content Content Content Content Conte

[encyclo]

If you use a

span

, then you can add the text and still float the element without closing the paragraph.

[PowerUp]

so.. my html will be like this?

<p><span class="imgwrap floatright"><img scr="@#$12">This is a photo about blue widgets</span>Content content content content content content content content content content content content content content content content content content content.</p>

[encyclo]

You might need a

<br>

between the image and the text within the

span

, but yes that is correct.

[PowerUp]

Thanks encyclo. It works great.