CSS Positioning of AdSense Ads Overlaps Navigational Sidebar

I use CSS to position my Google AdSense ads when the web page loads. I recently noticed that my footer Google AdSense ad sometimes covers my right-side navigational links such as on http://www.romancestuck.com/test-pages/35th-anniversary.htm The ad is sometimes a smaller width than other times. So, you may need to refresh the page a couple times to see the wider ad that overlaps the navigational links.

Anybody know how to set up this ad CSS positioning so that is always below the main content or the right-side navigational links, whichever is longer?

Thanks!
webstuck5Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Because you give it an absolute position so it will go wherever you put regardless of what is already there
Then again it's such a spammy looking site I don't think it really detracts from anything.
Should be asking yourself how much money do I make from all those ads and is it worth it at the detriment of my site.
0
webstuck5Author Commented:
First of all, the ad loads at the top of the page and then moves to the footer area. So, not sure what you mean by "it will go wherever you put regardless of what is already there".

Second, I didn't ask for your opinion on how the site looks.

Third, the purpose of the site is to make money so I'm not sure what you mean by "is it worth it at the detriment of my site".
0
GaryCommented:
You give <div id="ad1"> an absolute position relative to <div id="ad1-position"> which means it goes near the bottom of the content/page and directly over everything else there.

Over and out.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

webstuck5Author Commented:
So, is there something else that I could put which is what I meant by, "Anybody know how to set up this ad CSS positioning so that is always below the main content or the right-side navigational links, whichever is longer?" I already know what the current code does so pointing that out isn't really helpful.
0
COBOLdinosaurCommented:
There is little point in trying to manage layout with CSS when the markup is unk.  The validator throws a bunch of errors, and until you clean up your code trying to fix layout is pointless.  Though the fact that the ad is so important that you allow it to resize without control is going to be an issue anyway.  Either the page controls the add or the ad controls the page.  Which is more important.

Cd&
0
webstuck5Author Commented:
What do you mean by allow it to resize without control?
0
webstuck5Author Commented:
Ok...I don't think any of those validation errors were major or had much to do with my current issue. However, so it is no longer an issue, I fixed all but the ones resulting from third-party widgets that my website uses. So, does anybody know how to set up this ad CSS positioning so that is always below the main content or the right-side navigational links, whichever is longer?
0
GaryCommented:
Stop using absolute positioning and just place it where it should be so it naturally flows with the page.
0
webstuck5Author Commented:
The reason that I position it with CSS is that you want your best preforming ad to load first, which is my footer ad. So, I load it first and then move it to the footer area as recommended by Google.
0
GaryCommented:
That doesn't make sense to me.
So give the div content I mentioned above that has the relative position a bottom padding equal to the height of the ad.
So when you absolute position the ad it takes up this space used by the padding.
0
webstuck5Author Commented:
I think that's what I have with:

      #ad1
      {
        /* ALIGN THIS AD WITH THE BOTTOM OF ITS PARENT ELEMENT */
        bottom:0;
        clear:both;
        height:90px;
        left:0;
        margin:0 auto;
        position:absolute;
        right:0;
        width:970px;
      }
      #ad1-position
      {
        /* PAD THE BOTTOM SO THERE IS ROOM FOR THE AD */
        padding-bottom:90px;
        position:relative;
      }
0
GaryCommented:
The best you can do is add padding-bottom: 120px; to #main {...}
0
webstuck5Author Commented:
The problem is the right-side navigational link don't have a set length so I don't know how long the column will be.
0
GaryCommented:
You will always have a problem trying to absolute position because of the layout of your html
The simple solution is to just put it where it should be.
0
webstuck5Author Commented:
That isn't a good solution when it causes my best performing ad to load last so it won't load my best ad.
0
COBOLdinosaurCommented:
like I already said:
"Either the page controls the ad or the ad controls the page.  Which is more important?"

Pick one or re-design to address both issues, because with the current design you are not going to get both aesthetic and commercial issues resolved.

Cd&
0
webstuck5Author Commented:
How do I re-design to address both issues?
0
COBOLdinosaurCommented:
You come up with a page layout that gives you what you need;  do the markup; add the styling; and test.  However if you want it to look the way it looks now and you are unwilling to compromise you will probably just dig yourself into the same hole again.

Cd&
0
GaryCommented:
That isn't a good solution when it causes my best performing ad to load last so it won't load my best ad.
It makes no difference - what does it matter in what order the ads are loaded, as far as what the user sees the page will look exactly the same.
0
webstuck5Author Commented:
0
COBOLdinosaurCommented:
I am aware of adsense and its code. They don't care what it does to your layout, they just want to sell ads.

If you want the positioning and sizing to be dynamic then you need to do more then just position it with CSS after loading. You need to use scripting to set the positioning dynamically so there is no conflict. That will add to rendering time and may make the elements on the page jump around a little.  It will make the page even less user friendly.

Cd&
0
GaryCommented:
Put a div where the ad should be
<div id="footer_ad"></div>

Then put this js near the bottom of the page before the closing body tag
<script>
document.getElementById('ad1').appendChild(document.getElementById('footer_ad') );
</script>

Open in new window

0
webstuck5Author Commented:
I set up a test at http://www.romancestuck.com/test-pages/place-adsense-ad-with-javascript.htm but it doesn't seem to be moving the ad down.
0
GaryCommented:
Got them the wrong way round
document.getElementById('footer_ad').appendChild(document.getElementById('ad1'));

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
webstuck5Author Commented:
A couple questions:

1. Using this script wouldn't cause AdSense to load the ad twice would it?

2. Why does the page now give a couple errors when I run a web page speed test at http://tools.pingdom.com/fpt/#!/epVENt/http://www.romancestuck.com/test-pages/place-adsense-ad-with-javascript.htm

3. Is there a way to load the ad out of view before the script moves it to the bottom of the page?

Thanks!
0
GaryCommented:
1. Shouldn't do - all you are doing is moving the div.  The js has already fired

2. I don't know why it's aborting the load, this is probably a Google error.  Try it within the real page. You are using a page that has not been indexed by AdSense so it may have something to do with that.

3. Give the ad1 div a display of none and then in the move code add as the last line.
document.getElementById("ad1").style.display = "block";
0
webstuck5Author Commented:
I did try it on the real page and it still gave the Google error. I thought I saw somewhere that you are not allowed to set Google ads as a display of none.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.