This should be really easy. I cant get the blue box to go into the white area using floats.
I'm not sure there's a way, as you have it. If you put a wrapper around the red box, and put the red and blue boxes inside it, then you could float orange and yellow to the right of them.
Hardly a fix, but closer: http://jsfiddle.net/QWqsH/1/
Assuming you want the blue box to be directly under the white and red boxes like a column your problem is that your container height is set too low for the height of the three boxes. I played with it and set the container box to 73px and it fit the blue box right under the white one of the same width. There is a second alternative than setting the height, this involves making a clear div just before the closing of the container tag and removing the height setting altogether on the container.
the solution i suggest to rearrange the code
and it will be like follow
and float yellow and orange right
this will fix your problem