How to position AdSense on site with CSS position: absolute


Tags: css,position,ads,adsense

Problem :

I have an AdSense account, and simply copy/pasted a block of Javascript to include ads on my site. However, since I did not put any HTML in place, the Js is generating an iframe and an ins element which the ads are appearing within.

I want to move those ads to the left of my content, where I have made space for them. I've tried adding CSS like "ins, iframe { position: absolute; left: 0; top: 0; }" but it seems to be overwritten.

So my question is: how can I force the AdSense ads to appear where I want them to? Preferably with CSS.



Solution :

You do it the same way you use CSS to control anything else: put it in a div, give it a class (or id), and format the parent object.

Are you already using CSS? If so, just add a new one something like this in main.css:

#google{
    position:absolute;
    right:0px;
    width:160px;
    top:120px;
    border-left: 1px solid black;
}

Then in your page, where appropriate, add the following around Google's JavaScript:

<div id="google">
    <--! code here -->
</div>

    CSS Howto..

    How can I use a `comment` fa-icon and a text div to display the number of messages a user has?

    CSS Padding is working WITH :after selector - how to make it work on main element independently

    how I can change the size of font inside PHP

    How to check if css value is supported by the browser?

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How to dynamically reload a .css?

    How to remove horizontal space between divs that contain fixed size svg elements?

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    How to mark up speedometer/gauge in HTML/CSS?

    How to construct multilevel menu using CSS only?

    How to set height?

    How do I change tab size in Vim?

    how do i edit my CSS to show following things please [closed]

    CSS How to embed several Font-Weights at once

    How to set css style to asp.net button?

    How to provide an API to alter CSS / styles / white label for an encapsulated angularJS directive ( re usable widget / component )

    DOM How to add two divs (with jQuery inside them) next to each other?

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    How to create a form that flys out onto the screen using javascript/css

    How to set p margin for a section

    How can I place a checkbox within a button? [closed]

    How to center [image + text] of unknown width?

    Selenium IDE - How to check that an element is (CSS) visible?

    How to reset a slideshow after the last picture is shown

    How to wait for a video background in HTML until it finish and then view the contents of body section?

    How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript?

    CSS - How to align divs horizontally?

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    CSS - How to position a fixed sidebar div relatively to a centered content div

    How do you close the CSS preview view in Eclipse?