float:right not working for oversized banner image in Safari and Opera

[eh]

Hi
I'm using the Banner module which generates the following HTML:

Code: Select all

    <hr class="accessibility" />

    
<div id="banner">
  <!-- Begin Banner Output -->
  <a href="http://www.sampleweb.ch/index.php?mact=Banners,cntnt01,link,0&cntnt01banner_id=11&cntnt01category_id=1&cntnt01returnid=15" Homepage >
    <img src="uploads/banners/banner_bellewald_1280.jpg" height="200"  alt="Homepage " />
  </a>
  <!-- End Banner Output --> 
 
</div>

The banner image width is 1280px whilst the HTML page uses the CMSMS defaults, i.e. does horizontal resizing to some extent when the browser window size changes. Nevertheless the banner image width is guaranteed to be bigger than the maximum HTML content width.

For aesthetic reasons the banner image should be right aligned so in case the page (browser window) gets smaller the right part of the image remains visible while it gets truncated at the left side. Therefore I applied this CSS styling:

Code: Select all

div#banner {
    overflow: hidden;
}

div#banner img {
    float: right;
}

This works fine in Firefox and Safari, but in IE7 and Opera the image gets truncated at the right side and stays fixed at the left side.

I tried different approaches to find a solution, using additional 's  and various combinations of CSS styles - you know, the way it is to find out CSS behaviour. But no success!

I'd appreciate any kind of support to help me with this.
Regards
Ernst