Scalable site in parts

Question

I'm trying to make a scalable site where the basic logic is illustrated on this example:

http://pastehtml.com/view/1eg2pr1.html

The amount of purple boxes in the middle changes whenever you resize your browser window.

But is there a way of making the green "logo" box in the top follow the width of these boxes like illustrated on this picture: http://imageshack.us/photo/my-images/198/testimg.jpg/

So if there is 7 visible purple boxes in the first row, the green box should have the same width as theese - and the width of 10 boxes if there is 10 visible in the first row

Is it possible to do that, perhaps using jquery? I know I can use "width:100&" on the green box, but that doesnt follow the exact width of the purple boxes then :/