How to float DIV right in the second row of the inline DIVs in relatively positioned webpage?

I have relatively positioned webpage - it expands and shrinks with user's screen resolution. Because it's easier to draw my scenario, here is my simplified layout:

And here is simplified HTML:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="ad"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
etc...

CSS is like this:

.box { width:200px;height:300px;display:inline-block;*display:inline;margin-right:20px }
.ad { width:420px;height:300px;float:right }

My problem is shown on the picture - I need to have .ad floated right, but in the second row. It works fine in other browsers but IE is the problem, it just floats the .ad in next row(third row). Is there crossbrowser (IE7 and u开发者_高级运维p), possibly pure CSS (not condition, JS can be used) solution for this ?

Thank you very much in advance.

This seems to be working in IE for me, I added a wrapper with a fixed width to contain it, but it should work without the width.

http://jsfiddle.net/9c2Fh/2/

html, :

<div class='wrapper'>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="ad"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

.box { 
    width:100px;
    background:red;
    height:100px;
    float:left;
    margin:5px 
}
.ad {
    display:inline-block;
    position:relative; 
    background:green;
    width:200px;
    height:100px;
    margin:5px;
}
.wrapper{
    text-align:right;
    float:left;
    width:330px;
}

What I did: The boxes are just floating, and filling up the open space from left to right. The ad is displayed as an inline block, so it's affected by the text align on the wrapper. The ad will be pulled to the right, the blocks fill up the other space.

That appears to be a sort of grid system, such as http://960.gs/ - there are a few css grid frameworks out there and I suspect they have already solved this...