Float and Shrinkwrap
in [CSS]
|
Prev: fixed height.
Next: Newbie layout/positioning problem
From: Gus Richter on 10 Apr 2008 10:34 Ben C wrote: > On 2008-04-07, Gus Richter <gusrichter(a)netscape.net> wrote: > [...] >> 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. > > No the containing block for a float is always above it in the document > tree. I was trying to say that it was counter-intuitive because in the markup/source the normal would be to have the float come _second_ as: <div id="shrink"> <div id="float">Some text and more</div> Some text and some more to get a few more lines. </div> when compared to where the float comes _first_: <div id="float">Some text and more</div> <div id="shrink">Some text and some more to get a few more lines.</div> -- Gus
From: Gus Richter on 10 Apr 2008 10:54 Ben C wrote: >>> The float sticks out of the bottom of the first P, but is stacked on >>> top of the second P, even though the second P comes later in the >>> document. Assume P has a non-transparent background in this example. >> Even with a background color applied to the float in order to see it, > > Perhaps it will help to give the <p>s also thick borders. The point is > just that the float is stacked on top of the second P's background > instead of going behind it. I see the overlapping now. -- Gus
From: Gus Richter on 10 Apr 2008 11:05 dorayme wrote: > In article <27adndj4i_Ugp2HanZ2dnUVZ_rrinZ2d(a)golden.net>, > Gus Richter <gusrichter(a)netscape.net> wrote: > >> I note that on alt.html dorayme is responding to a question "DIV - >> dynamic height" wherein she gives another variable on her referenced page: >> <http://netweaver.com.au/floatHouse/page10.html> >> That page should be included in this thread as well. >> The terminology of nuclear family should be removed, however, and >> replaced with "containg block" and "floats". IMHO of course. > > I am not sure about this Gus, it is really not quite specific enough to > be useful on the phenomenon you have raised. (btw, I accept now that > there are reasonable explanations for what goes on). Because you're using the "normal intuitive" method on that page. Refer to the other post where I gave: > I was trying to say that it was counter-intuitive because in the > markup/source the normal would be to have the float come _second_ as: > > <div id="shrink"> > <div id="float">Some text and more</div> > Some text and some more to get a few more lines. > </div> > > when compared to where the float comes _first_: > > <div id="float">Some text and more</div> > <div id="shrink">Some text and some more to get a few more lines.</div> -- Gus
From: Ben C on 10 Apr 2008 16:43 On 2008-04-10, Gus Richter <gusrichter(a)netscape.net> wrote: > Ben C wrote: >> On 2008-04-07, Gus Richter <gusrichter(a)netscape.net> wrote: >> [...] >>> 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. >> >> No the containing block for a float is always above it in the document >> tree. > > I was trying to say that it was counter-intuitive because in the > markup/source the normal would be to have the float come _second_ as: > > <div id="shrink"> > <div id="float">Some text and more</div> > Some text and some more to get a few more lines. > </div> > > when compared to where the float comes _first_: > > <div id="float">Some text and more</div> > <div id="shrink">Some text and some more to get a few more lines.</div> OK, but in these two examples the containing block for the float is different. In the first one it's #shrink, in the second it's BODY or whatever's immediately outside #float and #shrink. The text in #shrink flows around the float, but that doesn't mean it shares the float's containing block. Floats often overflow their containers vertically and any inlines that are in the way have to get out of the way, regardless of whose containing block they are in. The damage caused by a float is however restricted to its block formatting context (often higher up the tree than the local containing block).
From: Gus Richter on 10 Apr 2008 19:29
Ben C wrote: > On 2008-04-10, Gus Richter <gusrichter(a)netscape.net> wrote: >> Ben C wrote: >>> On 2008-04-07, Gus Richter <gusrichter(a)netscape.net> wrote: >>> [...] >>>> 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. >>> No the containing block for a float is always above it in the document >>> tree. >> I was trying to say that it was counter-intuitive because in the >> markup/source the normal would be to have the float come _second_ as: >> >> <div id="shrink"> >> <div id="float">Some text and more</div> >> Some text and some more to get a few more lines. >> </div> >> >> when compared to where the float comes _first_: >> >> <div id="float">Some text and more</div> >> <div id="shrink">Some text and some more to get a few more lines.</div> > > OK, but in these two examples the containing block for the float is > different. Agreed, but I was just trying to say .... > In the first one it's #shrink, in the second it's BODY or > whatever's immediately outside #float and #shrink. > > The text in #shrink flows around the float, but that doesn't mean it > shares the float's containing block. > > Floats often overflow their containers vertically and any inlines that > are in the way have to get out of the way, regardless of whose > containing block they are in. I'm OK with all that as well. Thank you for your input. -- Gus |