Why does this work?

[Kropotkin]

Hi

I have some css like this:

<p span style="float:right;"><img src="pic.jpg" /><br /><span class="caption" >caption here</span><br /></p>
<p>Some text here</p>

[class 'caption' is just a font]

The result I get is the picture on the right and the text 'Some text here' on the left - which is what I want.

But i would have thought that the first <p> would put everything it contains in a block with no float. It seems the float is inherited upwards by its enclosing <p> which I didn't expect. Can anyone explain for me why this happens?


Thanks
Kropotkin

[Pádraig]

Can we have a link to the website? It helps to see the all of the code.

[Kropotkin]

Hi Pádraig

A bit difficult as this is a DVD but i've reproduced the problem here:
http://www.justinwyllie.net/css_problem.html

As I say it works but I'm interested to know why? do you know?

Cheers
Justin

[Pádraig]

I'm not sure I fully understand the problem, but as you have a "float: right" in both of the <span>'s, the text will obey that. I'm not sure that this will work in all browsers, though.

[Lchad]

Since the first p has a float right to it, it scooted the photo to the right.
Leaving blank space to the left of it. Anything following that photo will fill in the space on the left.

[Kropotkin]

Hi lchad

But my first p element doesn't have a float on it. If it did then fine - my question is about the fact that the float is on a child element of this p. In CSS does a float on a child element effect the parent element?

Thanks

Justin

[Kropotkin]

Pádraig.

btw i tried to view your web site and there was a problem, don't know if it is just my end or otherwise

[Lchad]

Whatever the last css is assigned to a particular "element" is what the browsers read. The last get's priority.

So the first p is getting ignored.

[Pádraig]

I'm moving to a new server. If I have to wait another day, I will have to look for another host!

[Kropotkin]

ok. thanks. Lchad. This must though be something to do with float - if I made the span color red but put text in the para outside the span that wouldn't be red. It seems that with boxes if an inner box sets a float or width (are these called something?) then if the parent element does not have its own set it will take its value from the child - as you say the parent is ignored.

I tested in safari, FF and IE so consident.