How to float banner in foreground of div background?

I am having issues trying to right align banner ads in the foreground of a <div> background image which has a fixed width of 760 px. Because the banner is too large it is just shifting the div contents below the banner and not floating at all.

Is there any solution for this?

I am using the code:

<div id="logostrip"><div style="float: right">IMAGE CODE HERE</div><div style="background: url(images/cyclic/misc/logostrip.gif) no-repeat;width: 760px;height: 125px;float: left"></div></div>

Code (markup):

It works ok with 468x68 banners on bigger resolutions, but 1024x768 and lower the div breaks.

 

I'm assuming what you are trying to do is right align and if the image is large it overlaps the background image. If that is the case the what you will want to do is remove the "float: left" from the div with the background so your code would look like...

<div id="logostrip"><div style="float: right">IMAGE CODE HERE</div><div style="background: url(images/cyclic/misc/logostrip.gif) no-repeat;width: 760px;height: 125px;"></div></div>

Code (markup):

If you are looking at possibly enlarging then you may want to look at the overflow property in css.

 

That's exactly what I wanna do. I had already tried your code suggestion however the div is still breaking on me.

What is overflow all about, is there a page you can point me to regarding it?

 

I use w3school for quick references for such things. The link directory to the property is http://www.w3schools.com/css/pr_pos_overflow.asp

 

I tested the code that I mentioned previously using firefox and IE using xhtml 1.0 strict for the doctype. Do you have the full html so I can see how it is rendering?

 

Oh right, so instead of breaking the div it allows you to scroll left/right.

Not really what Im wanting to do, thanks all the same though.

 

Sure I will PM you the details.

 

I was able to reproduce your problem and came up with a solution. I'm going to play around a bit using the floats tomorrow but in the meantime here is a fix to your problem using a few other css properties (position, float and right).

<div id="logostrip"><div style="position: absolute;right: 0px;">IMAGE CODE HERE</div><div style="background: url(images/cyclic/misc/logostrip.gif) no-repeat;width: 760px;height: 125px;float: left;"></div></div>

Code (markup):

Hope this helps.

 

Thanks for looking into it for me bullfrog, it worked great!