AdSense Cast Study: Stage 4 Ends

It's been awhile since I've discussed the ongoing AdSense case study, so let's discuss things a bit more before leaving Stage 4 of the Invisible Fence Guide.

Stage 4, as you recall, is all about using CSS to beautify the site. The idea is to rely as much as possible style sheets instead of HTML tables, both from a maintenance standpoint (it can be quite hard to figure out what's what when you're working on a page that uses tables nested within tables nested within tables ad infinitum) and from a search engine optimization (SEO) standpoint (because search engines can more easily interpret a page that focuses mostly on content as opposed to layout).

CSS is both very simple and very complex. Truly, CSS is simple. What's complex are all the bugs that you have to work around to get your page to display the way you want to in different browser versions. These problems will iron themselves out eventually, but it's certainly a pain sometimes when you want to do something fancy like caption pictures with CSS.

The three-column layout I ended up implementing on the Invisible Fence Guide is actually fairly simple to setup. The basic structure of the HTML is as follows:

<div id="outer_wrapper">
  <div id="wrapper">
    <div id="left">
      put your left-hand column stuff here
    </div> <– left –>
    <div id=”sidebar”>
      put your right-hand column stuff here
    </div> <– sidebar –>
    <div id=”main”>
      put your center column stuff here
    </div> <– main –>
    <div class=”clearing”>&nbsp;</div>
  </div> <– wrapper –>
</div> <– outer_wrapper –>

I should point out that the left and right columns have fixed widths in this layout, but the center column has variable width. This may not be what you want, but when you're showing ads on the left or the right it usually works well, because the ads normally have fixed sizes.

Here are the accompanying styles:

#outer_wrapper {
    background: #ffffff url(background_3.gif) repeat-y left;
    min-width: 950px;
}

#wrapper {
    background: #ffffff url(background_2.gif) repeat-y right;
    min-width: 950px;
}

#main {
    margin-left: 170px;
    margin-right: 200px;
    padding: 1em;
    min-width: 500px;
}

#left {
    margin-left: 10px;
    margin-right: 0px;
    margin-top: 1em;
    width: 170px;
    float: left;
    background-color: #FFFFFF;
}

#sidebar {
    width: 200px;
    float: right;
    padding: 0.5em;
}

.clearing {
    height: 0;
    clear: both;
}

Note that the two wrapper styles use images as their background. These are just images that are the correct width for the appropriate column filled with the background color of the column.

You would adjust the column sizes appropriately for your site, of course. I'm using 170 pixels for the left column (where the AdSense ads are) and 200 pixels for the right column (where the site index and Chitika ads are).

I cobbled this layout together from various different CSS sites, looking for something that was simple and that worked in Firefox, Internet Explorer and Opera. Feel free to base your own layouts on this.

Now we're going to move onto Stage 5, which will be about optimizing the site for advertising and for traffic generation.

Eric Giguere is the AdSense expert who wrote Make Easy Money with Google. Subscribe to his AdSense newsletter for more tips and advice on AdSense and content monetization.

Comments