Re: identifying containing block

William Gill wrote:

Does anyone know of any tool that works like the DOM inspector to help
identify an element's containing block. It is probably just me, but on
more than one occasion I have had trouble figuring out why a
parent/child relationship (for lack of a better term) doesn't seem to be
following the rules, only to find that I was looking at the wrong "parent."

I use the Web Developer Toolbar extension in FF. One of its functions is
"Display Element Information" (CTRL+SHIFT+F), which does what I believe
you're asking for.

Note that what this shows isn't the same as "block formatting contexts".

--
John
Possessive "its" has no apostrophe. Even on the Internet.

On Feb 1, 11:30*am, William Gill <nos... (AT) example (DOT) com> wrote:

John Hosking wrote:
I use the Web Developer Toolbar extension in FF. One of its functions is
"Display Element Information" (CTRL+SHIFT+F), which does what I believe
you're asking for.

Note that what this shows isn't the same as "block formatting contexts"..

Thanks John, I hadn't used that particular tool (or have and have
forgotten it) it's quite helpful. *Unfortunately block formatting
context is what I was looking for. *I know and understand the CSS Visual
formatting model, but I have difficulty keeping things straight in
practice.

I think I'm going to have to make myself a logic/flow chart to summarize
everything.

You get a block formatting context if you have absolutely positioned
the element, if you have floated it, if you set overflow to hidden or
auto ... Not sure there is a program that loudspeaks the fact though...

On 2009-02-01, William Gill <nospam (AT) example (DOT) com> wrote:

John Hosking wrote:
I use the Web Developer Toolbar extension in FF. One of its functions is
"Display Element Information" (CTRL+SHIFT+F), which does what I believe
you're asking for.

Note that what this shows isn't the same as "block formatting contexts".


Thanks John, I hadn't used that particular tool (or have and have
forgotten it) it's quite helpful. Unfortunately block formatting
context is what I was looking for.

I though you said you were looking for containing block? They are not
the same thing.

<div style="float: left" id="A">
<div id="B">
<div id="C">
</div>
</div>
</div>

C's containing block is B, its BFC is A.

One consequence of this is that if you put a float in C, A will get
taller to fit it in, but B won't. It will just overflow B.

On 2009-02-01, Patricia Aldoraz <patricia.aldoraz (AT) gmail (DOT) com> wrote:

On Feb 1, 11:30*am, William Gill <nos... (AT) example (DOT) com> wrote:
John Hosking wrote:
I use the Web Developer Toolbar extension in FF. One of its functions is
"Display Element Information" (CTRL+SHIFT+F), which does what I believe
you're asking for.

Note that what this shows isn't the same as "block formatting contexts".

Thanks John, I hadn't used that particular tool (or have and have
forgotten it) it's quite helpful. *Unfortunately block formatting
context is what I was looking for. *I know and understand the CSS Visual
formatting model, but I have difficulty keeping things straight in
practice.

I think I'm going to have to make myself a logic/flow chart to summarize
everything.

You get a block formatting context if you have absolutely positioned
the element, if you have floated it, if you set overflow to hidden or
auto ... Not sure there is a program that loudspeaks the fact though...

Also inline-blocks and table-cells (and table-captions).

On 2009-02-02, William Gill <nospam (AT) example (DOT) com> wrote:

Ben C wrote:

I though you said you were looking for containing block? They are not
the same thing.

div style="float: left" id="A"
div id="B"
div id="C"
/div
/div
/div

C's containing block is B, its BFC is A.

One consequence of this is that if you put a float in C, A will get
taller to fit it in, but B won't. It will just overflow B.

I did say containing block, and this appears to be the primary source
source of my confusion. Typo's and improper experimentation have
further obfuscated things. For example I discovered that an element set
to position:relative, but not actually offset acts differently than that
same element when properly offset, even if the offset is 0 (i.e. top:0;
left:0

I need to clear my brain, and have at it again so I don't add fuel to my
confusion, or to what I'm trying to ask.

Block formatting contexts are really "float formatting contexts". If you
aren't worried about floats, don't worry about them.

However, while I go back to
the drawing board I will try to restate (at least partially) what I am
trying to clear up to wit, when trying to set the width of a block as a
percentage, I seem to lose track of "percentage of what?"

Percentage of containing block width.

The CSS specification states there three positioning schemes: normal;
floats; and absolute. Clear enough. A position:relative is supposed to
be "normal" according to this, but it doesn't appear to always act
"normal" when determining "percentage of what?" It's probably just me
so I will re-read sections 9 and 10 again to see where I'm getting off
track.

If position is relative or static, the containing block is the content
box of the nearest block ancestor.

If position is absolute, the containing block is the content box of the
nearest ancestor with position: absolute, relative or fixed (even if
that ancestor's not a block! But most browsers don't implement "inline
containing blocks" properly).

William Gill wrote:

I think this is the type of concise abstract I need. Unfortunately, I
need to "unlearn" some misconceptions I may have cemented while I was
stumbling around. It's like the touchback/safety thing. I think to
myself "you always get those two backward, so your mental cue must be
inversed. Go with the opposite." Then I think "No you already reversed
the cue, because you know you always get them backward. Don't go with
the opposite" The result is I am doomed to never get it right.

I think you'll appreciate this: http://www.youtube.com/watch?v=TUee1WvtQZU


--
John
Possessive "its" has no apostrophe. Even on the Internet.