Using CSS to make a liquid grid of uniformly sized divs with margins

Question

How would you make a liquid grid of elements with uniform size and margins in CSS?

The main problem I have is the margins. I feel that the obvious solution is to set the widths and margins to a percentage and be done with it. This doesn't work because the vertical margin is a percentage of the container's width. When the container resizes horizontally, the vertical spacing is off.

I have tried two methods. One with percentage margins and one with 'em' margins. Neither of them scale correctly. What can I do?

Answer 1

Alright, I found a solution. I wrapped each button in a container element. The outer container fits perfectly with percentages for width and height. Then, the inner element has a margin to add spacing between each button.

http://jsfiddle.net/9jGYK/4/

The margins are still dependent on the width of the body but at least the buttons are the correct size. Is there a more elegant solution out there?

Answer 2

Are you looking for something like this? http://jsfiddle.net/LMJTu/

On the fiddle, click the button to change the size of the outer div.

Answer 3

Is it possible to have the left and right ones having no padding or margins? (so the space in between them should be determined by the width.