Google AdSense Skyscraper Ad Placement Using CSS

Here's the CSS code you need to supply, at a bare minimum. How you supply it is up to you; I'll let you decide which of the many ways to employ CSS that you want to use.

#data
{

position : relative;
margin-right : 176px;
}

#sky
{

position : absolute;
top : 3ex;
right : 1em;
width : 160px;
}

The #data style defines the portion of your page in which you'll put the content of the page (like this stuff I'm writing and you're reading right here.) The positioning stuff is, in my opinion, the most mystical part of CSS. But making any section relative in this way makes the sections position "relative" to other sections.

By specifying a right margin for the #data and making the #data section relative, you're telling other sections to align themselves to in the remaining space to the right of the #data section. If you were to have provided an adequate left margin (for example, margin-left : 167px;) the advertisement would then appear on the left.

In the #sky style, the section is positioned absolute-ly — that is to say, exactly where we tell it to go. In this case, we position it three characters from the top (to even it up visually with the top of the data section) and one character from the right. You'll adjust these values to work with your own site's appearance.

The width tells the skyscraper section to be exactly 160 pixels wide. The width in this case is set to 160 pixels because the Google skyscraper advertisements I chose are 160 pixels wide. If I had selected the 120 pixel wide sky scraper, I'd have set the width aswidth : 120px;.

Okay, that sets up our styles. Now to apply them to our HTML page:

<div id="data">

Page content goes here...
</div>

<div id="sky">

Google Skyscraper advertisement HTML goes here...
</div>

With styles, the HTML is really easy. You simply surround each section of the page in <div> tags, apply the classes to the <div> tags, and it happens magically. If you want to apply other attributes to each section, you do it by changing the style, not the HTML.

I've put together a sample of the Google Skyscraper Ad using CSS method. method. Feel free to browse it and view the source -- and borrow the source if you please.