Float and Shrinkwrap
in [CSS]
|
Prev: fixed height.
Next: Newbie layout/positioning problem
From: Gus Richter on 6 Apr 2008 23:35 Gus Richter wrote: > > We can predict consistent behaviour as soon as we accept that: > > 1. The float's real estate covers that of the containing block, where > both start at 0,0 (without any positioning). Either may have smaller or > larger width and/or height. > 2. In the instance of a float we actually 'already' have the float > layered on top of the containing block with a pre-established stacking > order. > 3. _Without any positioning applied_ to the containing block, the float > has a higher stacking order. The float is on top. > 4. _With positioning applied_ to the containing block, the containing > block has a higher stacking order. The float is on bottom. > 5. _With positioning applied_, the stacking order may be changed by > applying z-index to the containing block. I'm still playing around with this and I thought I would share this one: <http://www.home.golden.net/~richterf/Stuff/tst_2.html> -- Gus
From: dorayme on 7 Apr 2008 00:30 In article <bOqdnSlF-PAHC2TanZ2dnUVZ_t7inZ2d(a)golden.net>, Gus Richter <gusrichter(a)netscape.net> wrote: > Gus Richter wrote: > > > > We can predict consistent behaviour as soon as we accept that: > > > > 1. The float's real estate covers that of the containing block, where > > both start at 0,0 (without any positioning). Either may have smaller or > > larger width and/or height. > > 2. In the instance of a float we actually 'already' have the float > > layered on top of the containing block with a pre-established stacking > > order. > > 3. _Without any positioning applied_ to the containing block, the float > > has a higher stacking order. The float is on top. > > 4. _With positioning applied_ to the containing block, the containing > > block has a higher stacking order. The float is on bottom. > > 5. _With positioning applied_, the stacking order may be changed by > > applying z-index to the containing block. > > I'm still playing around with this and I thought I would share this one: > <http://www.home.golden.net/~richterf/Stuff/tst_2.html> There is no doubt about what we see in various browsers. I am still thinking about the float rules and the z-index rules and Appendix E. I am not as optimistic about the determination of these rules as you have appeared. But I am glad you are making me think about it. (I rarely use either rel positioning or z-indexing in any commercial work. Perhaps I should!) Here is me again harping about terminology. (I have this idea that it is quite important to be very clear and accurate in these matters). You refer to a div that follows the float in the html as a containing block. In a sense all divs are this in that they contain things or can. The wrapper you have also contains things, here they contain the float and the non-float divs. They don't seem to be doing anything useful here. The body already is a container for all examples. Firefox 2 on my Mac does respond to negative z-indexing btw. -- dorayme
From: Gus Richter on 7 Apr 2008 01:56 dorayme wrote: > > Here is me again harping about terminology. (I have this idea that it is > quite important to be very clear and accurate in these matters). You > refer to a div that follows the float in the html as a containing block. The spec refers to it as such. I used to refer to it, for my own comprehension and because of lack of a proper name, as the "float box". I believe that they refer to it simply as the "containing block" because it contains and constrains (to 0,0) the float (mostly, since we know that it can and will, also contain line boxes). > In a sense all divs are this in that they contain things or can. The > wrapper you have also contains things, here they contain the float and > the non-float divs. They don't seem to be doing anything useful here. To be honest, it was an easy way to make it all work with all the divs. No problem in that. I have thought about checking-for and reducing-any redundant markup. This is what I now come up with: The "wrapper" is used to wrap and separate each group for an easy way to position/offset each group with a margin-top declaration. The 1st "wrapper" may be removed and the margin applied directly to the containing block it is true, but the next two, since they are relatively positioned, won't work as easily. Try it. The float does not follow. Of course the float and shrink divs are mainly needed/used to give the background colours. > The body already is a container for all examples. Right, but to apply properties to a section, divisions come in handy. > Firefox 2 on my Mac does respond to negative z-indexing btw. Mac/Firefox 2 is better than Win/Firefox 2, I guess. ;-) -- Gus
From: dorayme on 7 Apr 2008 03:51 In article <c_SdneNyX7EEKmTanZ2dnUVZ_gWdnZ2d(a)golden.net>, Gus Richter <gusrichter(a)netscape.net> wrote: > dorayme wrote: > > > > Here is me again harping about terminology. (I have this idea that it is > > quite important to be very clear and accurate in these matters). You > > refer to a div that follows the float in the html as a containing block. > > The spec refers to it as such. I used to refer to it, for my own > comprehension and because of lack of a proper name, as the "float box". > I believe that they refer to it simply as the "containing block" > because it contains and constrains (to 0,0) the float (mostly, since we > know that it can and will, also contain line boxes). > > > In a sense all divs are this in that they contain things or can. The > > wrapper you have also contains things, here they contain the float and > > the non-float divs. They don't seem to be doing anything useful here. > > To be honest, it was an easy way to make it all work with all the > divs. No problem in that. I have thought about checking-for and > reducing-any redundant markup. This is what I now come up with: > The "wrapper" is used to wrap and separate each group for an easy way > to position/offset each group with a margin-top declaration. > The 1st "wrapper" may be removed and the margin applied directly to > the containing block it is true, but the next two, since they are > relatively positioned, won't work as easily. Try it. The float does not > follow. > Of course the float and shrink divs are mainly needed/used to give the > background colours. > > > The body already is a container for all examples. > > Right, but to apply properties to a section, divisions come in handy. > > > Firefox 2 on my Mac does respond to negative z-indexing btw. > > Mac/Firefox 2 is better than Win/Firefox 2, I guess. ;-) I guess we have been through a few of these things earlier. I put up an example to strip all the things that I thought were not necessary to show the interesting thing you are raising but I don't think you are too impressed with this! I guess we think differently, I find it helps to get rid of things I see as not relevant to the issue like wrappers to each pair of divs, which wrappers are not given any relevant css, widths that do not affect the basics and so on. This is not meant as some sort of invasion of your stuff, all I can do is say what I find clear and what not and hope you understand. I am not keen on using any phrase printed by others (including the css specs) if it does not signify something to me in my understanding. I am inclined to actually use the phrase "containing block" where the context shows it to do a job of containing. Your containing blocks don't contain anything obvious (except their own text or pictures, a sense in which most elements are containers). You seem not to be referring to what you are calling wrappers. Here is an example of mine still on a server where I use the the phrase: <http://netweaver.com.au/alt/positionRelative.html> Because the point is that it is the container, the parent, the big house where the children live... It is crucial that it is on the container, the parent, that rel pos is made for the abs to work. I put up this example just to make a terminological point, not to go into the subject of that example. More uses of this notion are in <http://netweaver.com.au/floatHouse> I am particularly interested in some of the things you are raising and am meaning to add a few pages to the latter on this subject. But not till I get clearer on it. So far I have got to making: <http://netweaver.com.au/alt/visibleOrder.html> And I find it interesting how the "layers" work and yet the float still exerts the influence to push aside (displace) the text or pics in the following divs. Just had never thought of the float rules operating from a smothered "underneath" position! Those float rules are powerful voodoo huh? <g> The black is merely the bg to the float, the height to the float is merely to show this bg. Heading css is irrelevant and only to lay out the page a bit neatly. My examples are not that different to yours and address my own pedantic mind on this. I am beginning to form a better picture of all this stuff and thanks for raising it Gus. -- dorayme
From: Gus Richter on 7 Apr 2008 10:25
dorayme wrote: > > I guess we have been through a few of these things earlier. I put up an > example to strip all the things that I thought were not necessary to > show the interesting thing you are raising but I don't think you are too > impressed with this! I guess we think differently, I find it helps to > get rid of things I see as not relevant to the issue like wrappers to > each pair of divs, which wrappers are not given any relevant css, widths > that do not affect the basics and so on. This is not meant as some sort > of invasion of your stuff, all I can do is say what I find clear and > what not and hope you understand. I didn't want the focus removed from my example initially since I had a question still unanswered at the time as presented in my example. I am not encumbered by some of the 'not relevant things' since they were there to assist in visually presenting how I see things. I have no problem with your examples as in: <http://netweaver.com.au/alt/visibleOrder.html> which I think present the same thing from a slightly different visual view. > I am not keen on using any phrase printed by others (including the css > specs) if it does not signify something to me in my understanding. > > I am inclined to actually use the phrase "containing block" where the > context shows it to do a job of containing. Your containing blocks don't > contain anything obvious (except their own text or pictures, a sense in > which most elements are containers). You seem not to be referring to > what you are calling wrappers. In my examples, "wrapper" and "containing block" are two different things. The "wrapper" is simply used to reposition the segment pairs. In your examples in the link I mention above, you use headings to accomplish this w/o wrappers. The "containing block" is each one of the yellow boxes in every one of your examples on the page linked above (yellow boxes in my examples as well). It is a bit counter-intuitive in that normally a container comes first in the markup, but in the case with floats, the "container block" comes _after_ the float. The "container block" contains the float (which is set to 0,0 of the container block) and line box(es) which are shifted to the right of the float. It is perhaps also counter-intuitive because it does not appear in the markup but is an auto-creation by the appearance of a float - a special feature of the float. I wanted to answer some more to other points below, but have run out of time. Must do other things today. The meat is in the above anyway. I like your examples. -- Gus |