J.Joe J.Joe - 1 year ago 54
HTML Question

BLOCK element inside a Table

With this combination of CSS and HTML, why is

rendered above

#wrapper { display: table; }
header { display: table-header-group; }

<div id="wrapper">

Answer Source

The <nav> element has display:block and it's the immediate child of an element with display:table, so the layout engine generates "anonymous wrapper boxes" around it to force it to conform to the table formatting model. Similarly, the bare text node inside the <header> element, which has display:table-header-group, is wrapped up. The "box tree" that results is the same as if you had written this HTML with no CSS:


And a <table> is specified to show the contents of its <thead> first, then its <tbody>, so you get HEADER and then NAVIGATION.

See the discussion of "layout-internal display types" in the CSS3 Display specification. EXAMPLE 1 in particular describes something very similar to this.