Floated background div affecting space in foremost div

I have the following markup:

<div id="container">
    <img src="images/behind.png" id="behind" />
    <div id="header">
    </div>
</div>

With the following style: #container { margin-left: auto; margin-right: auto; width: 800px; }

#container #behind{
    float: right;
    margin-top: -50px;
    margin-right: -20px;    
}


#header {
    border: #ACACAC 1px solid;
    background: silver url('../images/headerbg.png') repeat-x;
    height: 100px;
    margin-top: 50px;
    position: relative;
    width: auto;
    margin-right: 0px;
}

Now this appears as I'd like it to; however when I add the开发者_Go百科 login box to the header and float it right, it moves to the right of the header container but is padded to right with the width of the image in #behind, which is about 200px.

Suggestions?

---

There might be an issue with an image floating next to a ... try putting the image inside a and then floating that .

For example:

<div id="container">
    <div id="behind"><img src="images/behind.png" /></div>
    <div id="header"></div>
</div>

---

As far as i understand your situation, you have two elements, both floated to the right. This will cause these elements to be next to each other. Look at example 4 here: http://j-cafe.com/floats.html

If you want the image in #behind to be in the background and the login box on top of that, you should set the image from #behind as a background image in the #container div, just like you do with headerbg.png. You can align this to the right like in this example:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

That way it will not interfere with the login box anymore.