fill the height of a given div

Question

I am trying to make the green div to fill the height no matterthe content of the yellow one.

The green and the yellow divs are inside the grey div.

here is the code: http://jsbin.com/ofelov/1/edit

(Well About this question, I dont even know what the title should be, so I apologize if it isn't the right one and feel free to modify it)

Answer 1

it would be much easyer if the yellow div would be in the green div. is there a reason why the yellow div is outside?

Answer 2

Chris Coyier's solution:

[http://css-tricks.com/equal-height-blocks-in-rows/][1]

There are many other methods out there, just google 'javascript equal columns'. Javascript is the best solution for handling the problem of floating divs where equal heights are desired. Sure, this can be done with tables and css, but tables shouldn't be used for layouts.