Question

I have a div (MainDiv) with the overflow and static width and height. This div loads html content using AJAX. Those html is a multiple div-blocks with float: left CSS property, so MainDiv can be scrolled left and right. Every block has the same, fixed width

Little example:

<div id="MainDiv">
<div class="Block" style="float: left;" id="Block1">Content #1</div>
<div class="Block" style="float: left;" id="Block1">Content #2</div>
<div class="Block" style="float: left;" id="Block1">Content #3</div>
...
<div class="Block" style="float: left;" id="BlockN">Content #N</div>
</div>

How can i get position relative to MainDiv of one of div.Block using jQuery? For example, i need to get position of #Block10 relative to MainDiv.

Answer 1

Using jQuery:

var pos = $('#Block10').offset();
$('#Block10').append('X=' + (pos.left - $('#MainDiv').offset().left) + '<br />');
$('#Block10').append('Y=' + (pos.top - $('#MainDiv').offset().top) + '<br />');