2 container side by side one fixed one dynamic height

Have a look at the jsFiddle:

http://ift.tt/1I6XduC

I want these divs to be exactly like this but without this part

top: 50%;
margin-top: -100px;

because it causes the divs to go out of the view field once its too small.

I also like to change the fixed div to be on top of the other and not fixed anymore once the window is smaller.

at best without the need of javascript.

I'd also like the dynamic height div to create height for the body, since i have a background image div which has to be the whole height of the page.

Edit: after all I found a solution with a media Query: http://ift.tt/1KEWJjf