Many examples and source codes required javascript to build floating banner. In this example I only use CSS without javascript. There are two models frequently used, top banner and bottom banner. Be Careful if you use at bottom and itâ??s floating. User may feel itâ??s annoying but not much as pop up banner. Take a great look to your user and website before user it.

Whatâ??s your purpose to use floating banner at the bottom? If itâ??s asked to me then Iâ??ll say itâ??s hoped that users always see the banner whenever they scroll browser document although itâ??s position is at bottom. Your advertisers will have better opportunity to gain more profit from their banners.

How to build it? I wrote full code for this including required CSS and HTML.

<!– Here we start our Floating Banner Bottom –>
<style>
#floating_banner_bottom {
text-align: center;
width: 100%;
bottom: 0px;
margin-bottom: 0px;
height: 106px;
position: fixed;
z-index: 100;
right: 0;
_position:absolute;
_top:[removed]document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}
html>body #floating_banner_bottom { margin-bottom: 0px; bottom: 0 }
 
#floating_banner_bottom div.close {
margin: 0 auto;
width: 728px;
height: 16px;
text-align: right;
}
</style>
 
<div id=”floating_banner_bottom”>
<!– Button to Close Banner –>
<div class=”close”>
<a rel=”nofollow” onclick=”javascript:pageTracker._trackPageview(‘/outgoing/article_exit_link’);” href=”#” onclick=”document.getElementById(‘floating_banner_bottom’).style.display=’none’;return false;”>
<img src=”close.png” border=”0″>
</a>
</div>
<!– Here we use google adsense 728×90 –>
<script type=”text/javascript”>
google_ad_client = “pub-XXXXXXXXXXXXXXXX”;
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = “728Ã?90_as”;
google_ad_type = “text_image”;
google_alternate_ad_url = “http://yuniarko.com/”;
google_ad_channel = “yuniarko.com”;
google_color_border = “FFFFFF”;
google_color_bg = “FFFFFF”;
google_color_link = “0000FF”;
google_color_text = “000000″;
google_color_url = “005577″;
</script>
<script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>
<!– End Here –>

I use banner size 728Ã?90 from google AdSense and 16Ã?16 close button. You can any banner and close button you have. The height for floating banner is 106 = 90 + 16. We must set width for close button div same as bannerâ??s width 728.

And thatâ??s all I can give. Please give me your feedback if thereâ??s some errors in it.