Make two CSS elements fill their container, side-by-side, with margin

Question

I want two elements to take up an exact percent of the parent\'s width, but I also need margins on them holding them apart. I have the following markup:

Answer 1

None of the above techniques worked consistently enough cross browser for me. I found a slightly different technique using display:table-cell allowed me to place 2 or more elements next to each other. Here is an example of it in action.

The CSS:

    display:table-cell;
    background:#009; color:#cef; text-align:center;
    width:22%; /*Set percentage based on # of elements*/
    border:4px solid rgb(255,0,0);/*no longer need background to be red, just make border red*/

You no longer even need the wrapper since the div is now treated as a .