CSS: can an object be bigger then its parent?

Say you have this:

<p>
blah
<span> blah blah </span>
</p>

with the css:

p {
width: 100px
height: 100px

}

span {
width: 200px;
height: 200px;
top: 50px;
left: 50px;
}



As you can see, the span is twice as big as the p which contains it. In this case, the p object will stretch to accomodate the child (don't parents always? ) to 250x250 px.

If I were to set the overflow to hidden the p would remain at 100x100 px, but only the top left 50x50px portion of the span would display (the rest is clipped).

Is there a way (in CSS *alone*) to somehow get BOTH elements to display at their defined size (i.e. the span "floats" on top of the p) WHILE still being able to maintain the span's 50x50 offset RELATIVE to the p's dimensions. (in other words, absolute positioning is not the answer - unless I'm missing something).

Thanks,
Ruy

You nearly answered it yourself in your question, try this:



If you come across problems with the <P> still taking up space as if it were including the span within it (not sure if and when it will occur - but I have a sneaky suspision that IE may want to do it that way) try using a clip on the <P> too.
Although you may have to fiddle with the positioning too.

-D

tried that - no go
and i have been messing around with positioning without much luck :P

just remember to add display:block; to the css,
when you assign width, height, to a inline element.

actually for the particular thing I need this for it will be divs which are block elements by default (i think) - i used p and span as examples.