Nesting the floating image gallery in a centered DIV

[eophotos]

[Batalf]

[eophotos]

[eophotos]

In fact I found the solution.

Suppose your 'wrapper' centered DIV is 655 pixels in width. You have to adjust each DIV coordinates every window.load and window.resize by a factor you refresh everytime there is a resize.

In the code, it means that getDixCoordinates must be changed (my comments prefixed by <<)

function getDivCoordinates()
{
var divs = document.getElementsByTagName('DIV');

offsetX_marker = 7; << I put those here until I figure out how to get that value from the JS document properties.
offsetY_marker = 7;
offsetX_wrapper = ((document.documentElement.clientWidth - 660)/2)-10; << This is the new variable. Recalculated at every call to getDivCoordinates

for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageBox' || divs[no].className=='imageBoxHighlighted' && divs[no].id){
divXPositions[divs[no].id] = divs[no].offsetLeft +offsetX_wrapper; << here the divXPositions account for the offset added by the wrapper DIV.
divYPositions[divs[no].id] = divs[no].offsetTop;
divWidth[divs[no].id] = divs[no].offsetWidth;
divHeight[divs[no].id] = divs[no].offsetHeight;
}
}
}


It works an absolute treat!

[eophotos]

You might need an offsetY_wrapper if you add a header above that wrapper div, I am not sure.