This is my situation, I have a css 3 column fluid layout (finally mastered the holy grail, thanks everyone!) and in my left column I have a google adsense advert. For those of you familiar with this, they aren't very flexible in the advert sizes, but I am curious if there is a way to change the advert based on the width of the column. Currently this column sits at 20%, so I am thinking maybe a good old fashioned "If - Else" statement might do the trick, but I haven't got it to work yet. The logic is that say we have two ads, a 180 px wide one (a) and a 280 px wide one (b), so if the column is greater than 280 px then it will display advert b, if not then it will display advert a. Has anyone else done this? Thanks!
There are a few considerations here. First, you tagged this question with css. If you simply want to use css to hide the ad your logic has determined should not be displayed, it's trivial to do so, but this is a terrible idea. For one, you'll be hiding a loaded ad, which Google specifically forbids. Next, you might end up hiding an ad that has loaded first, and therefore has the most "valuable" clicks on your page. You don't want to be left showing your less valuable ads.
What you need to do is use javascript at page load to determine what the viewport width is, and then choose which ad code to load in the ad slot you are talking about. Test this in as many browsers as possible, because you need to make sure you getting the correct viewport width for this strategy to work. If, for some reason, it doesn't work, make sure that the fallback doesn't collapse the layout catastrophically. The downside to this method is that if the user changes viewport size after the page load, then the ad will break boundaries. You can at least use CSS to mitigate this edge case scenario, either hiding or cropping the ad's parent div (overflow: hidden;) so that a change of viewport size doesn't break the layout.
