Comment by BSeward | Hacker News Reader

Comment by BSeward | Hacker News Reader

Parent Full thread

Can you identify some layouts that require display: table/table-row/table-cell? They solve some problems with CSS, but those problems (insofar as I've experienced) only come up when working with designs that specifically target the shortcomings of CSS' other display modes (e.g. your shorter secondary column has a background that needs to extend the length of the primary column); or that have layout idiosyncrasies so unconventional that a designer would either need to be familiar with how to implement them to even propose them, or be actively malicious (e.g. uh... like a variable height container that sits at the bottom of a secondary column alongside a longer primary column, I think?).

But "yes" to fast prototypes.

Many times when you want to constrain an element's size and/or alignment based on the size/alignment of elements above/below and beside it, you need to use table layout. Consider a simple layout from a site I will be launching very soon (not to scale):

       BBBB
    A  BBBB
       BBBB
  CCCCCDDDDEEEEE
  CCCCCDDDDEEEEE
       FFFF
       FFFF
       FFFF

You want A to be vertically centered with B and horizontally centered with C. You can't give a fixed width or a fixed height to anything because the layout needs to be fluid. I don't see how to do it without using table layout.

If some dimensions of some elements can be fixed (e.g. the width of A and C), or if some alignments are changed to make thinks convenient (e.g. align the bottom of A with the bottom of B), of if approximate alignment is good enough, then often nested block/inline-block and some positioning fu can be used instead of tables. But, sometimes the automatic table layout algorithm is exactly what the layout needs.

Reply on news.ycombinator.com