Using display:table-cell without containing display:table
css, html
Solution
Yes, it is valid. Read 17.2.1 of CSS2 spec regarding anonymous table objects. More specifically, these sections...
Generating missing child wrappers:
- 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.
- 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.
- 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:
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.
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.
Problem
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> ```