40

I'm trying to create a semantically correct HTML 5 web page utilizing CSS 3. I've created the below markup which exists at the root of my body element. Applying display:table-cell to both the aside and section elements causes them to column as I would like them to. However, I have no containing element to apply a display:table to. Is it okay to use display:table-cell if the element which it is being applied to is not contained within a display:table? If not is there a better mechanism to create a column layout with these elements without using floats?

<aside>
    <nav>
       <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
       </ul>
    </nav>
</aside>
<section>
    Content goes here
</section>
John Slegers
  • 45,213
  • 22
  • 199
  • 169
ahsteele
  • 26,243
  • 28
  • 134
  • 248

2 Answers2

51

Yes, it is valid. Read 17.2.1 of CSS2 spec regarding anonymous table objects. More specifically, these sections...

Generating missing child wrappers:

  1. If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children.
  2. If a child C of a row group box is not a 'table-row' box, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not 'table-row' boxes.
  3. If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.

Generate missing parents:

  1. For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes.

  2. For each proper table child C in a sequence of consecutive proper table children, if C is misparented then generate an anonymous 'table' or 'inline-table' box T around C and all consecutive siblings of C that are proper table children. (If C's parent is an 'inline' box, then T must be an 'inline-table' box; otherwise it must be a 'table' box.)

    • A 'table-row' is misparented if its parent is neither a row group box nor a 'table' or 'inline-table' box.
    • A 'table-column' box is misparented if its parent is neither a 'table-column-group' box nor a 'table' or 'inline-table' box.
    • A row group box, 'table-column-group' box, or 'table-caption' box is misparented if its parent is neither a 'table' box nor an 'inline-table' box.
Josh Stodola
  • 81,538
  • 47
  • 180
  • 227
1

From the CSS2.1 specs :

17.2.1 Anonymous table objects

Document languages other than HTML may not contain all the elements in the CSS 2.1 table model. In these cases, the "missing" elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element. Missing elements generate anonymous objects (e.g., anonymous boxes in visual table layout)

...

What this means is that if we use display: table-cell; without first containing the cell in a block set to display: table-row;, the row will be implied — the browser will act as though the declared row is actually there.

So yes, using display:table-cell without containing display:table does produce valid CSS. That doesn't mean its behavior is stable, however. Even today (February 2016), the behavior of display:table and display:table-cell remains inconsistent across browsers. See Inconsistent behavior of display: table and display: table-cell for some examples.

Community
  • 1
  • 1
John Slegers
  • 45,213
  • 22
  • 199
  • 169