Question

I have the following HTML code

<div id="container">
    <div id="fixed">Logo</div>
</div>​

and then the following CSS code

#container {
    width: 400px;
    border: 1px solid red;
    float:right;
}

#fixed {
    float:left;
    width: 200px;
    border: 1px solid green;
}​

When i resize the windows i want the fixed div to keep moving to the right when the edge of the window is at the begining of it.

Do you know any way of doing this with CSS, javascript or HTML?

I have created an example in jsfiddle you can view it in http://jsfiddle.net/alvarezskinner/kRrdb/ if you resize the middle bar you will see the fixed layer stays still.

Answer 1

I don’t think this does exactly what you want, but it at least gets closer. Change the container style to:

#container {
    width: 100%;
    border: 1px solid red;
    float:right;
    max-width:400px;
}

Instead of moving the fixed div, this will just make sure that the container doesn’t get wider than the page, thereby ensuring that the fixed div doesn’t go past the left of the page. Will this work well enough?

Here is a fiddle if you want it: http://jsfiddle.net/jdwire/kRrdb/2/