Assume a site layout consisting of a header of 100% width, two columns below that are 25% and 75% width, then a 100% width footer. Let's talk about the 25% width column. I want a tower ad to appear there. On someone's browser, say the column is 200px wide. AdSense will serve a 160px wide ad as the best fit, yes? But this will look strange as there will be 40px of width not filled. I could center it inside a styled box, but it would still look off.

I've searched for ways to achieve one fixed-width column and one that grows, but the methods all seem hackish. One elegant solution involved floating both columns left and setting a margin of -100% on the fixed-width column, which (unintuitively) puts it into the desired position. But I'm leery of using this for a number of reasons.

A better solution (to my mind) might be to have some javascript that executes on document ready to snap the column widths to sizes appropriate for ad slots. The 200px column would shrink by 40px and the other column would grow by the same. The downside would be that users may notice the browser redrawing the layout. I wonder what solutions other people are using?


Here's another question. The responsive ads are fed to ad slots via javascript, correct? (I haven't used the new code yet.) Does this mean I can make a choice about where the ad is placed at page load time? Let's say I want a leaderboard to appear in the 75% width column, but only if the column is wide enough for it. If the column is not wide enough, I want a leaderboard to instead appear in the header. Easy enough to do with javascript, but will AdSense have a problem with this?

I'm interested to learn from those with more experience on this topic!