Formatting Google Adsense ADs

ernies · #1 (**permalink**) 02-04-2012, 08:00 AM

Hello,

I am a bit to HTML and css. I wanted to incorporate a one ad block on the left side of the body part of the page. I'm been thinking about how to format it. Is the best way to create an adssense block just to make a new div id thing on the left side of the page and decrease the width of the body or what? Any suggestions are welcome.

Thanks

nikomaster · #2 (**permalink**) 02-04-2012, 08:18 PM

You have to options:

First you can create a main table on the body section and place the ads on the left.

Quote:

<table>
<tr>
<td>Asense</td>
<td>Your site content</td>
</tr></table>

Or you can implement the CSS property float:left in a div tag:

Quote:

ernies · #3 (**permalink**) 02-05-2012, 08:24 AM

Thanks, I don't really know tables so well so I will be sure to try the css method.

ernies · #4 (**permalink**) 02-05-2012, 08:50 AM

I'm still confused about the method, could you possibly give me an example? Here is my code so far.

HTML Code:

<div id="body">
        <script type="text/javascript"><!--
        google_ad_client = "REMOVED";
        /* Wide Skyscraper ADD */
        google_ad_slot = "7580633267";
        google_ad_width = 160;
        google_ad_height = 600;
        //-->
        </script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
</div>

Code:

#body{
    border-style:solid;
    border-width:1px;
    margin: auto;
    width: 990px;
    height:1000px;
    padding: 5px;
}

nikomaster · #5 (**permalink**) 02-05-2012, 10:41 AM

your code is fine, just add the property "float:left" into your "body" CSS code.
I am seeing you are using all available space for your ad. You may want to format the size of the te "div" tag, to a lesser size, such as the size of the ad.

For the rest of the code i.e the content place the "float:right" property to their CSS code.

Example:

Quote:

CSS Code
#ad
{
float:left;
width:120px;
height:600px;
}

#content
{
float:right;
width:520px;
}

And for the HTML

Quote:

Using this example, the ad will be at the left and content at the very right. Also by setting "content" to float:left will also put the code at the right of the ad because the ad code is first.

ernies · #6 (**permalink**) 02-06-2012, 05:05 PM

It's almost where I want it to be but the body and content aren't lining up correctly with the header. I want to be side by side in the middle of the page. Do you know how to do this? here is my code.

Code:

#leftad{
float:left;
width:120px;
height:600px;
margin: auto;
}
#content{
float:right;
width:520px;
height:600px;
border-style:solid;
border-width:1px;
margin: auto;
}

nikomaster · #7 (**permalink**) 02-07-2012, 12:44 PM

The header of the site must have the same size of your ad+content. In this way your header would be on top. Also if that does not work you can add the clear:both property to your header section

Code:

#header
{
   width:640px;
   clear:both;
}

Moreover, I recommend containing all section into a main section.

Code:

   #main{
      width:650px;
      text-align:left;
    }
   #main-content
   {
      width:640px;
   }

Code:

  <body>
   <div id='main' align='center'>
        <div id='header'>
           <!-- Site header here -->
        </div>
        <div id='main-content'>
            <div id='leftad'>
               <!--Ad code here -->
            </div>
            <div id='content'>
              <!-- Content here-->
            </div>
        </div>
     </div>
    </div>
  </body>

ernies · #8 (**permalink**) 02-07-2012, 04:28 PM

Ok, Thanks, I'll try it out

**ScriptMan** · #9 (**permalink**) 02-07-2012, 04:48 PM

Quote:

Originally Posted by ernies

Hello,

I am a bit to HTML and css. I wanted to incorporate a one ad block on the left side of the body part of the page. I'm been thinking about how to format it. Is the best way to create an adssense block just to make a new div id thing on the left side of the page and decrease the width of the body or what? Any suggestions are welcome.

Thanks

You did not provide a URL so all I can go is tell you what I do.

I use a 3 col layout where the adsense goes in the right div on most of my sites. The navigation goes in the opposite side and the center width is determined by whatever is left over. The last time I looked most people were still surfing at a little over a 1000px wide. That may have changed by now. 200 for navigation, 170 for adsense and about 550 for the main div is the way I am currently doing it.

When the over whelming majority is surfing at higher resolutions, I will increase the width of the center div. I along with many others feel that supporting the lowest common setting is the best approach.

JumboHoster · #10 (**permalink**) 02-08-2012, 06:19 AM

In the adsense itself when creating the ad you should be able to choose the dimensions there, then you can just input it into your code as the correct size already and not loose any quality from resizing.