I used display:table-cell to make 3 divs have equal height. Now margin is not working ( wanted to put 10px of space between each div). I tried using cell-spacing:10px; but that doesn’t seem to work either. I am baffled.
You’re heading in the right direction, but you’re not quite there.
The border-spacing property is the one you should use (margins don’t apply to internal table objects). But it only applies to tables, not to cells. You should set the border-spacing on the ancestor element that has a display value of table (or inline-table). In this case the <div class="t">.
one question… which probably has no answer, but maybe one of you experts knows a trick.
is there a way to apply spacing so that it doesnt affect the EDGE cells? in other words if the cell touches the edge of the table there is no space, but there is space to that separates one cell from the next.
You can either put a class on the inner or outer cells manually, or you can use fancy CSS selectors such as :first-child and :last-child … but beware, these don’t work on older browsers, so will only give the right effects to people who are running modern browsers.