Hello everyone I hope you're doing awesome.

I'll cut to the chase, I want to align 7 div squares in the next fashion.


AAABBBBBBCCC
AAABBBBBBCCC
DDDBBBBBBEEE
DDDBBBBBBEEE
FFFBBBBBBGGG
FFFBBBBBBGGG

A,C,D,E,F,G = different divs with aprox. 125x125px
B= middle div takes the same height of all of the divs stacked together and width around 40%

Now I tried a couple of things but I keep messing it up, here's my try at it... Here's my attempt
fiddle

I don't want to use absolute position or specific coordenates and sizes (just the min-width/height) because I want it to look good if the user resizes...

Or if you don't want to click the link

HTML Code:
<div id="div1" style="width: 100px; height: 100px;float:left;background-color: brown;"> (div1)</div>
<div id="bigdiv" style="width: 46%;  float:left;background-color: green;">middle div</div>
<div id="div3" style="clear:left; width: 100px; height: 100px;background-color: red;"> (div3)</div>
<div id="div4" style="width: 100px; height: 100px;background-color: orange;">(div4)</div>
<div id="div5" style="float:right; width: 100px; height: 100px;background-color: red;"> (div5)</div>
<div id="div6" style="float: right; width: 100px; height: 100px;background-color: orange;">(div6)</div>