How are the widths of nested absolutely positioned elements determined? - css

Question

Example:
<style>
div {
position:absolute; left:auto; right:auto; width:auto;
margin:0; padding:0; border:0;
}
</style>
<div id="containingBlock">
foo
<div id="inner">this is my text</div>
</div>
To determine the widths of both divs, we need the shrink-to-fit algorithm in http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width *
Let's start with #inner:
get the preferred minimum width
this
is
my
text
|----| preferred minimum width
get the preferred width
this is my text
|---------------| preferred width
compare both to available width:
computed width = min(max(preferred minimum width, available width),
preferred width)
Easy. But what is available width? Since we got no margins/paddings/borders, it's simply the width of containingBlock. But now we get an infinite loop, since the same algorithm applies again:
get the preferred minimum width of containingBlock
foo
+-------+
| inner |
+-------+
|--?????--| preferred minimum width
In other words: to get the width of inner, we must know the width of containingBlock and vice versa.
In reality, it looks like browsers just assume available width = 0 in this case: http://jsfiddle.net/pxvJJ/6/.
But this is not covered by the specs, or am I missing something obvious?
* (note that this spec has not yet been superseded by CSS3)

Answer 1

If we read carefully through the specs, we'll find that
CSS 2.1 does not define the exact [shrink-to-fit] algorithm.
It's supposed to be
similar to calculating the width of a table cell using the automatic table layout algorithm
which, in turn, is implementation-dependent.
So, the above example shows that excluding #inner from the calculation of containingBlock's preferred minimum width may be a good idea when implementing a straight-forward algorithm, and we'd end up with this:
|---| preferred minimum width
foo
+-------+
| inner |
+-------+
|--?????--|
which is probably what browsers do.
That being said, the question is: Which elements do actually contribute to containingBlock's preferred minimum width?
Let's see what happens if #inner has position:static; width: auto. This case is even harder. Again, the specs give the constraint
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
with no shrink-to-fit allowed this time. And, again, it cannot be solved. Or can it? Funny enough, it can! Let's see what actually happens: http://jsfiddle.net/pxvJJ/12/
Apparently, the statically positioned divs are treated differently. So I suppose the algorithm to determine width of containing block goes like this:
determine the preferred width of all contained block boxes in normal flow.
set width of containing block = maximum of those preferred widths
calculate the width of all contained boxes, now that width of containing block is known
I am still confused as to why (all) browsers do this. There seems to be no reason for treating absolutely positioned elements differently in this regard.