Float and Shrinkwrap

A floated element basically is stacked on top of the subsequent
shrinkwrapping element.
If the shrinkwrap is given position:relative then this stacking order
is reversed.
Why is this reversal in stacking order?

--
Gus

dorayme wrote:

In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

#shrink {border: 1px solid;background: #ffc;width:8em;}

OK Gus, will take a look. But I am puzzled why you talk of #shrink being
"shrinkwrapped"

Oh, there is some web design book that calls it that. I had never heard
of it until then.

Something about floats shrinking to the minimum size of the contents,
again something I'm unfamiliar with.

Perhaps someone can elaborate on this.

Jeff


(I used the id to try to interpret what you meant by

styling it with something that is normally associated with the idea of
shrinkwrapping. You drop this. Giving a div a width is not "shrink"
wrapping it.)

dorayme wrote:

In article <MsGdndQCEoMuCWjanZ2dnUVZ_rzinZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Something about floats shrinking to the minimum size of the contents,
again something I'm unfamiliar with.

A float sizes itself to the content. Just see by giving a float a border
and varying text.

But not an ordinary div that is given a width.

The subsequent text wraps around the float like shrinkwrapping paper
does. You obviously don't spend much time in the kitchen.

--
Gus

dorayme wrote:

In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

#shrink {border: 1px solid;background: #ffc;width:8em;}

OK Gus, will take a look. But I am puzzled why you talk of #shrink being
"shrinkwrapped" (I used the id to try to interpret what you meant by
styling it with something that is normally associated with the idea of
shrinkwrapping. You drop this. Giving a div a width is not "shrink"
wrapping it.)

#shrink is not being shrinkwrapped. It does the shrinkwrapping. #float
is what is being shrinkwrapped by #shrink.

I won't use the term any more if it is confusing.

--
Gus

In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

#shrink {border: 1px solid;background: #ffc;width:8em;}

OK Gus, will take a look. But I am puzzled why you talk of #shrink being
"shrinkwrapped" (I used the id to try to interpret what you meant by
styling it with something that is normally associated with the idea of
shrinkwrapping. You drop this. Giving a div a width is not "shrink"
wrapping it.)

--
dorayme

In article <MsGdndQCEoMuCWjanZ2dnUVZ_rzinZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Something about floats shrinking to the minimum size of the contents,
again something I'm unfamiliar with.

A float sizes itself to the content. Just see by giving a float a border
and varying text.

But not an ordinary div that is given a width.

--
dorayme

In article <_7KdnfgxaskgBGjanZ2dnUVZ_vCknZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:
In article <MsGdndQCEoMuCWjanZ2dnUVZ_rzinZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Something about floats shrinking to the minimum size of the contents,
again something I'm unfamiliar with.

A float sizes itself to the content. Just see by giving a float a border
and varying text.

But not an ordinary div that is given a width.

The subsequent text wraps around the float like shrinkwrapping paper
does. You obviously don't spend much time in the kitchen.

All this is distracting from your interesting question. "subsequent
text" in what? "Wrapping" is one thing, shrink-wrapping is another,
author widthing is yet another. I don't really know what you are meaning
by the reference to the kitchen.

I will say it again. A div that is not positioned, a *normal* div is not
a shrink-wrapping machine. A table cell is. A div that is widthed by the
author, also, is not a shrink-wrapping machine.

Text (that is not inside the float element) that wraps under the float
is not due to anything that can be called non-confusingly
shrink-wrapping. It wraps because there is no more room on the line. If
no author width is specified for the element that is not the float, it
will wrap only when user's browser has a width limitation*.

See what the difference is between a normal div and a float or table
cell by giving a border and varying the amount of text. You will see a
difference and the difference is one between shrink-wrapping and not
shrink-wrapping. In the normal div, a short bit of text will not cause
the width of the element to shrink to contain the text. The author
unwidthed div is simply 100%. The border will reflect this.

Now, can I please get back to Appendix E without being disturbed to see
what the hell it is saying? I am fast running out of time here.

----------
* Out back home we have browsers that are several miles wide (as are our
kitchens) and wrapping does not conjure up the thought of
*shrink-wrapping* at all. So no need to assume anything about my
knowledge of kitchens which is likely much more extensive than anyone
bar maybe Toby Inkster who was a Chef once.

--
dorayme

In article <Gc2dnQtbW8ZTB2janZ2dnUVZ_qygnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:
In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

#shrink {border: 1px solid;background: #ffc;width:8em;}

OK Gus, will take a look. But I am puzzled why you talk of #shrink being
"shrinkwrapped" (I used the id to try to interpret what you meant by
styling it with something that is normally associated with the idea of
shrinkwrapping. You drop this. Giving a div a width is not "shrink"
wrapping it.)

#shrink is not being shrinkwrapped. It does the shrinkwrapping. #float
is what is being shrinkwrapped by #shrink.

This is not right Gus. The float does it all by itself for its own text.
The div (as you have them) are not doing *this* shrink-wrapping thing

Remove the widths on everything completely (which are not needed for
your interesting question btw) to see.

I won't use the term any more if it is confusing.

--
dorayme

dorayme wrote:

This is not right Gus. The float does it all by itself for its own text.
The div (as you have them) are not doing *this* shrink-wrapping thing

Fine. The text wraps around the float. Forget about the word
"Shrinkwrapping". No problem.

Perhaps you confuse the float somehow. The float is a box with "Some
text and more" with a green background. You say I should remove the
dimensions. I have no idea why when I desire them. Remember that the
float could be an image with its dimensions. I also wish to set the
width for shrink box just because I can and to see it wrap around the float.

Remove the widths on everything completely (which are not needed for
your interesting question btw) to see.

No! The dimensions are needed! As is! In my examples!

1. In the 1st example it shows text wrapping around a float.
2. In the 2nd example position:relative; is applied to #shrink.
#float now goes behind #shrink. _Why?_
3. Example 3 is the same as the second example except background is
removed from #shrink. #float is still behind #shrink but can be
seen. Example 3 is only to show what's behind and in front.

I hope that this is clearer. BTW, I believe that I understand floats
very well and the examples are clean and simple. Once we get past this,
there is only the stacking order with my _Why?_ remaining, with Firefox,
Opera and Safari behaving the same.

~~~~~~~~
In a shipping environment, the item to be shipped may be shrinkwrapped.
This procedure does not alter the size of the item. The method I have
seen uses foam material which expands to envelop the item and takes on
the form of the item, padding the item within the cardboard box, ready
for shipping. The first I saw was shrink-tubing which under heat would
contract tightly over the item. I used this to insulate soldered wire
joints. Size of the item (relate this to the float) does not change,
only the shrinkwrapping goes around the item (relate this to the _text_
within div#shrink).

The kitchen part is thinking of the cellophane stretchable material
which you can use to wrap your vegetables, etc. to protect and keep
fresh. It also kind of shrinkwraps around the item.

If this is still unclear, then back to Appendix E.

--
Gus
Hey, it's the way my mind works. And it works - at times.

In article
<doraymeRidThis-A8B9E4.14270204042008 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <Gc2dnQtbW8ZTB2janZ2dnUVZ_qygnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

I won't use the term any more if it is confusing.

I think your question boils down to why the difference between the 2nd
and 3rd of:

<http://netweaver.com.au/alt/visibleOrder.html>

--
dorayme