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

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.