XF 1.2 Responsive design, header logo and another banner

We're running a plugin to display banners opposite the header logo.
I've enabled responsive design and on it's own, works brilliant on all my devices.

Our header logo, (400x68), is left aligned at the top of the forum regardless of page. If the browser shrinks, the logo is resized accordingly.

Now the banners we're showing (roughly 400x68 too), I've added to display after the header_logo hook, in a simple div, with a float:right to right align it.

Works fine on a full size browser, as displayed below. I've used the default theme but the behaviour is the same.
Yet when I resize horizontally, the banner ad sticks to the right, then when it meets our logo, drops below it (this is fine), the navbar drops too (which is also fine), but the page content does not. Which means it looks pretty unsightly.

I'm baffled now. Ive done most other things, but I'm struggling to get my head round what should be something simple.

Also, the site header logo is scaled nicely according to the browser.
How can I display the banner ad on the right, opposite the header logo, then when the browser is resized, have the navbar act correctly too. (Well, the navbar is acting correctly, it's the rest of the page that isn't, is that right?)
I'd also like the banner ad to resize too when the browser is shrunk even further below the 400px wide mark.

Or actually, I'd prefer it if the banner ad didn't drop at all (maybe at a very minimal width), instead *both* banners (header logo and ad) were treated as equally important and started resizing at roughly browser width * 2.

Cheers Brogan. I've already been through those, and I think I understand the jist of it all. I've included responsive AdSense already (Sadly based on refreshes, not 'live', but still.....)

This just has my head pickled. I need coffee.
The float:right I'm using is partially key, as removing that does stop the navbar dropping of course, but the banner ad is obviously not right-aligned, which I require.

Cheers Brogan. I know the banner is too wide. The problem is, when the page reduces width, I'd like to reduce them both equally, just like Xen reduces (scales) the header logo. I assume it's a CSS + code issue but I've no idea what.

Thanks.
Well, I've tried every single combination of CSS I can think of, and I still can't get it to play nice.
Every time the browser is shrunk, the banner ad on the right drops below and then if you keep shrinking it pushes off the edge of the left of the page.
It won't scale at all. Although the header logo still scales and behaves nicely.

The closest I could get to some almost-acceptable behaviour was using Russ' code above (minus the if conditional), in extra.css.

On my iphone in portrait, this basically dropped the banner ad below the header, it also dropped the navbar a nice amount (I used 190px IIRC).
Unfortunately the banner ad was still a little too wide (I still need it to scale).

If I was confused before, I'm even more confused now.
I think it's to do with the plugin I'm using (Merc's Ad Manager, Test Build 28). That pulls the banner into the headerMover via a hook.
I think that this ends up that both banners are in different elements and thus one scales and the other doesn't)

It may not be one size fits all, mine was pretty precise to whatever I was doin' at the time with other elements. Try setting the min to like 140 instead of 40 and see if it drops stuff down, if so you're good, just adjust as needed.