Moving one div over other using left property

Question

I have 2 divs like this.The red one and the black one I want to move the inner div over the outer in such a way that at the end of moving, the right most side of inner div should come to the right most edge of outer div. for that I added a 'left' style property to inner div and started reducing it from 0. But the problem is I am not getting any relation between the left and width of both the divs, to know when to stop moving.The width of inner div vary in time and not constant value.At what 'px' I should stop this.

This is my markup

<div id="divMenuContainer" style="height:18px;min-width:210px;overflow:hidden;">
            <div id="divMenuContainerInner" style="position:relative;overflow:hidden;">
                <ul id="ulMenuItems">                
                    <li ><a href="#" id="lnkInfo"  onclick="ChangeTab(this)">Info</a></li>
                    <li ><a href="#" id="lnkUsers" onclick="ChangePopupTab(this)">Users</a></li>
                </ul>  
            </div>          
        </div> 

divMenuContainer is the outer div and divMenuContainerInner is the inner div which i needed to move.Also the <li/> can be any number so In the script Im calculating the complete widths of all and assigning that as the width of inner div. Means the width of inner div varies.

var len =0;
$("#ulMenuItems").children("li").each(function (index, element) {
     len = len + parseInt($(element).css("width"), 10);
});
console.log(len);
$("#divMenuContainerInner").css({ "width": len });

Please go through this jsfiddle http://jsfiddle.net/80x5ujyw/1/

---

I found the answer with the help of answers provided here.I have made a jsfiddle on that

http://jsfiddle.net/q4u37yqe/1/

Modified the above fiddle that now two buttons provided to manually move the inner div http://jsfiddle.net/sqofk4pe/1/

Answer 1

From my understanding, you can use the css right:0 property to achieve this.

Here's a fiddle to demonstrate moving the inner div to the right most edge of the outer div with JS animation: http://jsfiddle.net/80x5ujyw/

Pasting code here for reference.

JS:

$(function(){
    var inner = $('.inner');
    var outer = $('.outer');

    var rightSpacing = parseInt(inner.css('right'))

    interval = setInterval(function(){
        if(rightSpacing < 0){
            clearInterval(interval);
            return;
        }

        inner.css('right', rightSpacing+'px');
        rightSpacing = rightSpacing - 10;
    }, 100);
});

HTML:

<div class="outer">
    <div class="inner"></div>
</div>

CSS:

.outer, .inner{
    height:100px;
}
.outer{
    position: relative;
    width:200px;
    border: 1px solid blue;
    background:blue;
}
.inner{
    position: absolute;
    right:50%;
    top:0;
    width:100px;
    background:red;
}

Using this approach the width and height of both the inner and outer divs may change at any time without affecting the behavior.

Answer 2

You should give both the child as well as the parent div a css position (either relative or absolute).
And then you could give the child (inner) div "right: 0"

outer{
    position: relative;
}

inner{
    position: relative;
    right: 0;
}

I think you mean something like this, if not you should add some code to your question.