Question

I’m trying to use table-cell elements in a grid system that utilizes negative margins on rows to eliminate the left and right gutters on nested grid elements. This works fine on floated and inline-block elements, but elements with display: table, while respecting the negative left margin, ignore the negative right margin:

Strange, eh? A simple demonstration: http://jsfiddle.net/57FAN/1/

All browsers seem to have implemented this the same way, unfortunately. Any ideas?

P.S. Let’s postpone the debate over table-* elements for layout until flex box is standardized.

Answer 1

The table doesn’t ignore the negative margin, but is only 100% in width and shifted 5px to the left. You would need a “100% + 2*5px” to fill the grey area entirely.

The row doesn’t have a width, thus uses the entire width available.

If you would use

.row {
  margin: 0 -5px;
  width: 100%;
}

you would see that the widths are equal