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

Afraid I dont think you can.

The float:left; removes your code from the containing div and all the elements end up next to each other, once an element leaves the screen to the right, it wraps underneath leaving a space (a bit like relative positioning does).

Also, you are attempting to compare a fixed width with a variable width, which is close to impossible.

If you take a look here: http://jsfiddle.net/P5Kjh/5/

First I reduced your code back to 2 divs and got that working.

I've added overflow:hidden to the backgroundG class to make sure there is a grey background and floated both divs left.

Then I set the widths, the cumulative total has to be around 100%, if you add a border to each element you need to work to a smaller percentage.

Then I added back the other 3 in a new backgroundG element and created a separte class for the fillup element so it would be 80% (without a border).

Probably doesnt help you a lot. sorry if not.

Cheers