Forum Moderators: not2easy

Message Too Old, No Replies

Is nesting a div inside a paragraph proper?

How else would you float an img inside a paragraph of text?

         

skube

9:52 pm on Dec 15, 2003 (gmt 0)

10+ Year Member



Consider the following example:

<p style="padding:20px">This has 20px margins</p>

Contrast it with:

<p style="padding:20px"><div>This has no left and right margins</div></p>

What is going on here? Why has the div caused the paragraph to ignore it's padding?

One might ask, why the heck would you want to nest a div within a paragraph anyway? Well, I'm trying to float an image inside a block of text.

Ok, that's easy:
<p style="padding:20px">
<img src="some.gif" style="float:left" />Lorem ipsum... </p>

That's all fine, but how about if you also wanted a caption to accompany the image? You would have to contain the image and it's caption within a div, no?

So this should be a fairly common situation...what am I missing here?

skube

9:59 pm on Dec 15, 2003 (gmt 0)

10+ Year Member



Silly me!...yes of course it's improper. I forgot the basic rules of structured markup.

Instead of:

<p style="padding:20px"><div style="float:left">Some text</div></p>

I should have:

<div style="float:left">Some image + caption</div>
<p style="padding:20px">some text...</p>

duh.

mipapage

8:43 am on Dec 16, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I tried this [webmasterworld.com] as well (using a <dl>).

Of course it's valid, you can drop it into a <p> tag or whatever, my only q was semantics - was it correct?

Anyway, works great for images with captions in css layouts.