CSS Google Ad positioning

Question

I'm having a problem with displaying my Google ad on www.FreeMinecraftHost.com

When I use this code:

<div class="top-bar">
        <div class="logo">
            <a href=""><img src="FMHLogo.png" alt="Logo" border=0></a>
            <div style="top:-25;"></div>
            <script type="text/javascript">
                <!--
                google_ad_client ="ca-pub-3955111504945324";
                /* Banner */
                google_ad_slot = "6834015980";
                google_ad_width = 468;
                google_ad_height = 60;
                //-->
            </script>
            <script type="text/javascript"
            src="https://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>
        </div>

    </div>

It breaks the top-bar div, and the ad goes underneath the logo, If I take out the

<div style="top:-25;"> 

then the ad is next to the logo, but pinned to the bottom of the top-bar div, any ideas?

Answer 1

Put the advert in its own div and change its z-index . You could set it to some high value like 1000 or set it programmatically in case your page ends up with a lot of elements in the future. Eg:

div.google
{
    z-index: 1000; /*or do this programmatically with jQuery*/
    /*Other properties if required*/
}