absolute positioning of ad banner without header image overlap

Question

I'm working on a website that uses an older vBulletin message forum. The current setup works fine for the most part, however, when I open the forum in my mobile device, I see the ad banner (728x90) overlapping the logo image and it just looks bad. It gets even messier when looking at the banner css positioning because the top and right portions fit the needs of the rest of the layout.

My basic question is how can I redo this so that the banner doesn't EVER overlap the logo image while still holding the necessary offsets to fit the rest of the layout?

#container{
    width: 100%;
    height: 100px;
}
#logo{
    width:230px;
    height: 63px;
}
#advertisement{
    height: 90px;
    width: 728px;
    position: absolute;
    right:10px;
    top: 7.5px;
}



<div id="container"> 
   <div id="logo"><a href="index.php"><img src="logo.jpg" border="0" alt="Whatever" /></a></div>
   <div id="advertisement"></div> 
</div> 

** Not my CSS or HTML

Answer 1

I would give #container the property "min-width: 958", and keep the width of 100%. That way, the page will always be wide enough for both the logo and the advertisement.