Scalable site in parts

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

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 :/

Solution

Here is a script that should do what you want :

function adaptTitleWidth() {
    // reset default style
    $(".box").css("background","purple");
    // get the first row of boxes (the first box and the boxes having the same offset().top
    firstRowBoxes = $(".box").filter(function() {
        return $(this).offset().top === $(".box:first").offset().top;
        // changes the first row of boxes background to blue
    }).css("background","blue");
    // changing .logo.width() : number of boxes on the first row * outer width of the boxes, margin included - the last margin-right
    $(".logo").width(firstRowBoxes.length * $(".box:first").outerWidth(true) - parseInt($(".box:first").css("margin-right")));
}

$(function() {
    adaptTitleWidth();
    window.onresize = function(event) {
        adaptTitleWidth();
    }
});

jsBin example here