Banner ad positioning.

Hi, I have a website which I would like to ad banner ads to. It is alled www.first4horses.co.uk and I am using one of the template codes templates 'Modena Blue'. I have joined an affiliate programme and have the code for a Banner Ad which links to an advertiser. I have gathered from other posts that I should ad this to the layout.tpl file. However, I am a complete novice, and don't know whereabouts in the layout.tpl file I should put my code. I want to position the ad in the right side bar of the site, but just don't know where to starte or how to do this. I just threw the code in in body and the ad came to the top left of the page above the header or anything else. This is the code I have been given:
<div id="bannerad1">
<script language="javascript" type="text/javascript">
var myTarget='http://track.webgains.com/click.html?wglinkid=183480&wgcampaignid=142171&js=0';
var uri = 'http://track.webgains.com/link.html?wglinkid=183480&wgcampaignid=142171';
document.write('<a href="'+myTarget+'" target="_blank" onMouseOver="window.status=\'http://www.robinsonsequestrian.com\';return true;" onMouseOut="window.status=\'\'"><img src="'+uri+'" width="120" height="600" border="0" alt=""/></a>');
</script>
Now where do I put it so that the ad comes to the right of my page? Also, is it possible to explain (to someone thats not too sharp!!) how I recognise where to place code for different positioning , ie. next to logo, top left of page etc, in futire. Many thanks for any help you can give. Due to a few issues in the last year I've done nothing wih this site and now it's been so long I've forgotten even the little I did know. Added to that I believe Template codes are no more and I am using one of their templates.

Because what you are asking involves some knowledge of css and html, its not always as simple as saying "just put the code here or there".

Taking a quick look at your template, you would probably need to put the code here:

Code:

<h3>Recommendations</h3>
<ul class="friends">
 <li><a href="http://www.totallyprecious.co.uk/" rel="nofollow" target="_blank"><strong>Totally Precious Petcare</strong></a></li>
</ul>
<div id="bannerad1">
{literal}
<script type="text/javascript">
var myTarget='[URL='http://track.webgains.com/click.html?wglinkid=183480&wgcampaignid=142171&js=0%27;']http://track.webgains.com/click.html?wglinkid=183480&wgcampaignid=142171&js=0';[/URL]
var uri = '[URL='http://track.webgains.com/link.html?wglinkid=183480&wgcampaignid=142171%27;']http://track.webgains.com/link.html?wglinkid=183480&wgcampaignid=142171';[/URL]
document.write('<a href="'+myTarget+'" target="_blank" onMouseOver="window.status=\'[URL='http://www.robinsonsequestrian.com%5C%27;return']http://www.robinsonsequestrian.com\';return[/URL] true;" onMouseOut="window.status=\'\'"><img src="'+uri+'" width="120" height="600" border="0" alt=""/></a>');
</script>
{/literal}
</div>

I would recommend doing a little research in css and html to learn some basics...it will greatly help when working with your template

I noticed that the 2 banners on either side of your page are causing the main content of the page to not display till half way down the page.

I really like the logo you have on the classified.

Thanks freeze 2. In the end I added a "container" which included columns to the left and right side, which has given me the banners either side as I wanted. Have now got to work on alignment. I used display:inline-block (haven't got a scooby what it is really, but it kind of worked anyway) on my new container, as the centre elements disappeared if I used ctrl+ to zoom more than 100%, but now have an alignment problem, in that whole page seems to be aligned left. Will sus it eventually I hope! Thanks for your help.

Thank you, I haven't checked in all browsers yet, but I think I cured this issue using display:inline-block on my main 'container'. Have some alignment issues now!

Below is a very simple example of aligning a <div id="wrapper"> in the middle of the page. I've made it a 3 column layout to give you an idea of how your site should look.

The css:

Code:

#wrapper {
    width: 920px;
    margin: 0 auto;
    overflow: hidden;
}
#adleft {
    width: 120px;
    float: left;
    padding: 20px;
}
#content {
    width: 560px;
    padding: 20px;
    float: left;
}
#adright {
    width: 120px;
    float: left;
    padding: 20px;
}

The html:

Code:

<div id="wrapper">
    <div id="adleft">
        ## Ad Code ##
    </div>
    <div id="content">
        ## Site Content ##
    </div>
    <div id="adright">
        ## Ad Code ##
    </div>
</div>

Hope this points you in the right direction