Menu
If there are two absolutely positioned divs on a page, the innermost of which has content that should be rendered as a table, Firefox 3.6.x & 4.x, Chrome 13.x and Opera 11.x all resort to crushing the content.
Test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested Absolutes</title>
</head>
<body>
<div style=" position: absolute; background-color: green;">
<div style="position: absolute;">
<div style="display: table;">
<div style="display: table-column; width: 15px;"></div>
<div style="display: table-column;"></div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: blue;"></div>
<div style="display: table-cell;">
Banana Fritter
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: red;"></div>
<div style="display: table-cell;">
Cherry Pie
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Expected output ([C] to mean a block of colour C):
[B]Banana Fritter
[R]Cherry Pie
Will produce rendered output:
Banana
Fritter
Cherry
Pie
The divs with an explicitly styled width of 15px have been eliminated from view and any text context has had line breaks unnecessarily applied.
If either of the outer divs has its position changed to "relative", the layout of the content is restored to the expected layout.
Why does the use of two nested, absolutely positioned divs provoke a browser's layout engine into rendering the child divs with supplied styling ignored and the content forced into as small a space as possible?
** UPDATE **
A simpler example that avoids the complications of tables (fiddle):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nested Absolutes</title>
</head>
<body>
<div style=" position: absolute; background-color: green;">
<div style="position: absolute;">
<div>
Banana Fritter
</div>
</div>
</div>
</body>
</html>
Expected output:
Banana Fritter
Rendered output:
Banana
Fritter
497
An element with position: absolute is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.
Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.
source
You'll get no green background because `; is "empty" : is only child is in absolute aka "not there".
The words are warped because your table is positioned in an element with no space (a table take the space it can take by default). It's like forcing a "width:0%". You won't get any blue nor red for the same reason.
The following will produce similar output :
<div style="width:0px; height:0px">
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: blue;"></div>
<div style="display: table-cell;">
Banana Fritter
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: red;"></div>
<div style="display: table-cell;">
Cherry Pie
</div>
</div>
</div>
</div>
Thanks for the interresting question :)
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
