Float and Shrinkwrap

03/04/2008, 16h56

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

04/04/2008, 02h47

dorayme wrote:

> modify to show what you are wondering about. Sounds interesting Gus
> but there are so many things you could be referring to?

All is in the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="all">
#shrink {border: 1px solid;background: #ffc;width:8em;}
#float {float: left; border: 1px solid; background: #cfc;width:4em;}

#wrapper {margin-top:250px;}
#shrink_1 {border: 1px solid;background: #ffc;width:8em; position:relative;}
#float_1 {float: left; border: 1px solid; background: #cfc;width:4em;}

#wrapper_2 {margin-top:50px;}
#shrink_2 {border: 1px solid;width:8em; position:relative;}
#float_2 {float: left; border: 1px solid; background: #cfc;width:4em;}

</style>
</head>
<body>
<div id="float">Some text and more</div>
<div id="shrink">Some text and some more to get a few more lines.</div>

<div style="position:absolute;top:50px;left:200px;width :400px;border:2px
solid

adding:6px;background

range;">
<p>
"Assume" #float to be positioned at top:0;left:0; - then #shrink (the
shrinkwrap box) is also at top:0;left:0;</p>
<p>So the floated element (#float) basically is stacked on top of the
subsequent shrinkwrapping element (#shrink).<br>
If the shrinkwrap is given position:relative then this stacking order
is reversed. [see example 2] - #float is behind #shrink and

therefore is covered (hidden).<br>
<span style="color:red;">Why is this reversal in stacking order?</span></p>

<p>Example 3 is the same as example 2 except the shrinkwrapping element
(#shrink) has its background removed - #float is still behind

#shrink but now we can see the float again since its no longer covered.</p>
</div>

<div id="wrapper">
<div id="float_1">Some text and more</div>
<div id="shrink_1">Some text and some more to get a few more lines.</div>
</div>

<div id="wrapper_2">
<div id="float_2">Some text and more</div>
<div id="shrink_2">Some text and some more to get a few more lines.</div>
</div>

</body>
</html>

04/04/2008, 03h38

dorayme wrote:
> In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.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.)
>

04/04/2008, 04h00

dorayme wrote:
> In article <MsGdndQCEoMuCWjanZ2dnUVZ_rzinZ2d@earthlink.com> ,
> Jeff <jeff@spam_me_not.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

04/04/2008, 04h04

dorayme wrote:
> In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.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

04/04/2008, 05h31

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.

04/04/2008, 05h52

dorayme wrote:
> In article
> <doraymeRidThis-A8B9E4.14270204042008@news-vip.optusnet.com.au>,
> dorayme <doraymeRidThis@optusnet.com.au> wrote:
>
>> In article <Gc2dnQtbW8ZTB2janZ2dnUVZ_qygnZ2d@golden.net>,
>> Gus Richter <gusrichter@netscape.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>

Well, we could talk about your re-do, but why not mine?
Any way, your re-do has background:transparent; on the div which should
be on the float the 3rd time it's used in the example.

The question as posed before and here as well:
In the 2nd line, why does the float move to the back behind the div once
position:relative; is applied to the div?

--
Gus

04/04/2008, 05h56

dorayme wrote:
> In article <ocednXRAqO-WMmjanZ2dnUVZ_h6hnZ2d@golden.net>,
> Gus Richter <gusrichter@netscape.net> wrote:
>
>> No! The dimensions are needed! As is! In my examples!
>
> Gus. I am not saying you should not have the widths for some other
> purposes of your own! Have them! They are yours. I am happy you should
> have them. Really.
>
> I am only saying that that there is an interesting question about the
> visibility that has *nothing whatsoever* to do with your widths or any
> consequence of your widths. And it seems to me to be your essential
> question. See the url I gave before.
>
> <http://netweaver.com.au/alt/visibleOrder.html>
>
> The question still remains without the widths. Agree?

Yes I agree. I set it up like I did in order to make it clear and
simple. Boy was I wrong. I re-did the question to your example.

--
Gus

03/04/2008, 16h56	#1 (permalink)
Gus Richter Messages: n/a Hébergeur:	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

04/04/2008, 02h47	#2 (permalink)
Gus Richter Messages: n/a Hébergeur:	Re: Float and Shrinkwrap dorayme wrote: > modify to show what you are wondering about. Sounds interesting Gus > but there are so many things you could be referring to? All is in the following: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css" media="all"> #shrink {border: 1px solid;background: #ffc;width:8em;} #float {float: left; border: 1px solid; background: #cfc;width:4em;} #wrapper {margin-top:250px;} #shrink_1 {border: 1px solid;background: #ffc;width:8em; position:relative;} #float_1 {float: left; border: 1px solid; background: #cfc;width:4em;} #wrapper_2 {margin-top:50px;} #shrink_2 {border: 1px solid;width:8em; position:relative;} #float_2 {float: left; border: 1px solid; background: #cfc;width:4em;} </style> </head> <body> <div id="float">Some text and more</div> <div id="shrink">Some text and some more to get a few more lines.</div> <div style="position:absolute;top:50px;left:200px;width :400px;border:2px solidadding:6px;backgroundrange;"> <p> "Assume" #float to be positioned at top:0;left:0; - then #shrink (the shrinkwrap box) is also at top:0;left:0;</p> <p>So the floated element (#float) basically is stacked on top of the subsequent shrinkwrapping element (#shrink).<br> If the shrinkwrap is given position:relative then this stacking order is reversed. [see example 2] - #float is behind #shrink and therefore is covered (hidden).<br> <span style="color:red;">Why is this reversal in stacking order?</span></p> <p>Example 3 is the same as example 2 except the shrinkwrapping element (#shrink) has its background removed - #float is still behind #shrink but now we can see the float again since its no longer covered.</p> </div> <div id="wrapper"> <div id="float_1">Some text and more</div> <div id="shrink_1">Some text and some more to get a few more lines.</div> </div> <div id="wrapper_2"> <div id="float_2">Some text and more</div> <div id="shrink_2">Some text and some more to get a few more lines.</div> </div> </body> </html>

04/04/2008, 03h38	#3 (permalink)
Jeff Messages: n/a Hébergeur:	Re: Float and Shrinkwrap dorayme wrote: > In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d@golden.net>, > Gus Richter <gusrichter@netscape.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.) >

04/04/2008, 04h00	#4 (permalink)
Gus Richter Messages: n/a Hébergeur:	Re: Float and Shrinkwrap dorayme wrote: > In article <MsGdndQCEoMuCWjanZ2dnUVZ_rzinZ2d@earthlink.com> , > Jeff <jeff@spam_me_not.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

04/04/2008, 04h04	#5 (permalink)
Gus Richter Messages: n/a Hébergeur:	Re: Float and Shrinkwrap dorayme wrote: > In article <MPWdnYQR98QBFWjanZ2dnUVZ_sednZ2d@golden.net>, > Gus Richter <gusrichter@netscape.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

04/04/2008, 05h31	#6 (permalink)
Gus Richter Messages: n/a Hébergeur:	Re: Float and Shrinkwrap 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.

04/04/2008, 05h52	#7 (permalink)
Gus Richter Messages: n/a Hébergeur:	Re: Float and Shrinkwrap dorayme wrote: > In article > <doraymeRidThis-A8B9E4.14270204042008@news-vip.optusnet.com.au>, > dorayme <doraymeRidThis@optusnet.com.au> wrote: > >> In article <Gc2dnQtbW8ZTB2janZ2dnUVZ_qygnZ2d@golden.net>, >> Gus Richter <gusrichter@netscape.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> Well, we could talk about your re-do, but why not mine? Any way, your re-do has background:transparent; on the div which should be on the float the 3rd time it's used in the example. The question as posed before and here as well: In the 2nd line, why does the float move to the back behind the div once position:relative; is applied to the div? -- Gus

04/04/2008, 05h56	#8 (permalink)
Gus Richter Messages: n/a Hébergeur:	Re: Float and Shrinkwrap dorayme wrote: > In article <ocednXRAqO-WMmjanZ2dnUVZ_h6hnZ2d@golden.net>, > Gus Richter <gusrichter@netscape.net> wrote: > >> No! The dimensions are needed! As is! In my examples! > > Gus. I am not saying you should not have the widths for some other > purposes of your own! Have them! They are yours. I am happy you should > have them. Really. > > I am only saying that that there is an interesting question about the > visibility that has nothing whatsoever to do with your widths or any > consequence of your widths. And it seems to me to be your essential > question. See the url I gave before. > > <http://netweaver.com.au/alt/visibleOrder.html> > > The question still remains without the widths. Agree? Yes I agree. I set it up like I did in order to make it clear and simple. Boy was I wrong. I re-did the question to your example. -- Gus

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email