cohabitation problem transparent img and background color

hello mates,

for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color.
But i can't make the two cohabitate peacefully. :'(
i've tried with divs, span and p, no matter what it does not work.

here is the way i first thought it would work:






any idea how to make this happen ?

It sounds like what you are really wanting is text that only spans the right half of your screen, correct?

I have possible solutions for you. I took out the text-align: right; as that caused extended text to break unevenly on the left, which I don't believe was your intent. These solutions work in Mozilla 0.8, IE6.0 and Opera 7

This first should provide what you need (Note: not PHP code. I just like the colors):


..and if you are one of those who avoid floats:



If you did desire the gif div for some reason:

Note that the transparent div is 49%, not 50%...if they are both 50 it can wrap.

thanks a lot, i'm gonna try it and get back to you i

hello !

you can see the result here: obviously your reply guided me into a solution, where i finally had to have only one div, with a very large background image.

you can see the result here: http://temp.username.be/scanid/

there is one problem though (with firefox .9.2) : if you shrink the window horizontally, the footer comesto the middle of the page !
any idea how i can solve that ?

here is the html



here is the css





thanks again for your help !

I looked at the page, and it's not the footer that is causing the problem, it's this line:

Change it to this and you should be fine:


A couple other things. I noticed this in your CSS:

I originally thought that was the cause of the problem, before I saw the height style.
You should be careful using overflow: hidden;-especially in divs where you have content.

Also, this didn't happen when linking to your site, but when I saved the file to twiddle with it and viewed it in both Mozilla and IE6, I noticed this fading line at the top was odd. The 3rd line:
:: News :: actualité 3, en cliquant ici on accède aux news
was always visible below the first line (where the 3 lines cycled).

I didn't have time to play with that, but I might if you notice it happening as well.

Nice site, btw!

I didn't find the load time too large, but you could make a .gif for the left side of the footer-just take your current image, cut it off just past where the white color ends, then save it, making the dark red color transparent. Then just set the background of the footer to the color you wanted, and in the css set the new background image at a position of bottom left (or top left). That way the background color will fill in the footer for large resolutions.
That would also allow you to easily change the color scheme via CSS.

wow , that's a clever idea ! thanks a lot for all your help ! i'll get back to you with the final result.