How do I stretch two div-elements to fill available horizontal space?

Question

I really hope that you can help me.

I created this fiddle to show what I'm trying to do.

My question is: How do I stretch two div-elements to fill available horizontal space?

As you can see there are 5 div-elements strung together, wrapped by a div-element where I set the background-color and width with 100%.

There are three div-elements with a width of 50px.

The width of the other two div-elements should fill up to the rest availiable space, they should have the same width, too ->50% for each of both divs.

My problem is that the 50% for those both div-elements amount to a 100% total-width. And not to a availiable space width.

I'm trying not to use tables, etc.

Let me know if there is something unclear.

EDIT: I'd like to hear your comments about this way.

Answer 1

One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:

http://jsfiddle.net/GyxWm/

I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.