How to catch div position and reposition it later (on MAC)

Question

I'm creating an APP which there will be draggable elements available to the users. I would like to save the position of the elements to reposition later in the same place. I found out some similar questions here on stackoverflow, but looks like anyone passed for the same problems I'm having. So, I'm wondering if I didn't understand properly.

Basically my problem is: The value of element's position might be different depending on the adjust of window.

Example: If I catch the left position of an element with my window adjusted 50%(less) of its original size my left position is gonna be different than in 100% size.

So, If the user adjusts the elements with the window 50% less and save it when the same user is back the elements will be a mess(if the window is resized differently).

I have this example http://jsfiddle.net/EV5JZ/1/

If you go to your console you will see(the value):

console.log($('#section > li:eq(0)').find('.element:last()').position().left);

If you resize your window you will get differents values.

So, I missing something or should I use a specific approach?

CSS:

 <style>
    body, html {
      height: 100%;
      overflow: hidden;
    }

    #section { 
        list-style-type: none; 
        padding: 0px; 
        margin: 0px;
    }
    #section li { 
        margin: 0px 0px 1px 0px; 
        width: 99.9%; 
        background-color:#ccc; 
        border: 0px solid red; 
        min-height: 100px; 
        float: left;
    }
    </style>

HTML:

<div id="central-panel">

  <div id="template">
      <ul id="section">
        <li>

          <div class="element">1</div>
          <div class="element">2</div>
          <div class="element">3</div>
          <div class="element">4</div>

        </li>
        <li><span>::</span>Item 2</li>
        <li><span>::</span>Item 3</li>
        <li><span>::</span>Item 4</li>
      </ul>
  </div>

</div>

UPDATE :

Well, I found out how to fix it on Windows, but I realized the big problem is on MAC.

Basically, If I change the float:left on element class to none or change id template from "%" to "px" as below I can fix the issue, but on MAC it keep the wrong behavior.

.element { 
float: none; 
}

#template {
width: 1000px; 
}

Any idea?

Answer 1

Well, actually I was trying to do in the worst way.

My layout is liquid so everything is defined with "%". When I was trying to reposition the elements, I needed to subtract the left position saved for the "width" of layout elements which are positioned before the element, but the problem these layout elements can change its "width" according to the adjust of the window, therefore, the resolution could influence as well.

My elements which are supposed to be repositioned are inside a DIV element defined with "px". So, this way is much easier. I just took out the "float:left" from it and got the position like $.css('left') .

The problem was my approach. Now basically I get and reposition like this:

Get

$('#section > li:first()').find('.element:last()').css('left')

Reposition

$('#section > li:first()').find('.element:last()').css('left', '536px');