On May 24, 2010, at 1:56 AM, Gabriele Romanato wrote: > http://onwebdev.blogspot.com/2010/05/clearing-css-floats-with-css-table.html
On May 24, 2010, at 2:52 AM, Thierry Koblentz wrote: > The clearing is done via the creation of a new block formatting context [1], > so I don't think it is "display:table" that contains the float, but a > "implicit" "display:table-cell". Indeed, display: table generates an element with display: table-cell, per 17.2.1 http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes > The spec says something like this: "[display:table] can generate anonymous > boxes, one of them (with display:table-cell) establishes a new block > formatting context". The spec doesn't say that exactly, but 9.4.1 explicitly says that display: table-cell generates a new block formatting context. http://www.w3.org/TR/CSS21/visuren.html#block-formatting > This may explain the issue you're experiencing with WebKit (?). The issue in WebKit based browsers is that the element with display:table in the test-case is **narrower** than it should be (based on the specified width and padding). I'm not 100% sure, but I think this is due to the way padding on display:table is handled. WebKit includes the padding in the width here (treating the element with display:table as if it had box-sizing: border-box set ). http://www.w3.org/TR/css3-ui/#box-sizing I'm not quite sure who's correct; table width algorithms are a complicated mess. If you remove the padding on both boxes in the testcase, then all browsers fall in line. Similarly, if you specify 'border-collpase: collapse' for the element with display: table, browser fall in line (padding does not apply in that case). --- Side note: using display: table (or display:table-cell) to generate a new block formatting context (BFC) can have other unwanted effects. If the block contains long unbreakable strings, or elements with overflow:hidden/auto whose width depends on the width of the parent, the BFC-blocks width may end up very wide. And if no width is specified on the BFC block, its width may collapse to the minimum intrinsic width. That is how table/display: table works. Philippe --- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
