curlyblueeagle
curlyblueeagle

Reputation: 53

Absolute positioning does not work with browser resize

I am working on creating a webpage with animated images randomly positioned. My problem is that after a browser re-size images don't re-position within the container.

I have the images with absolute position and the container div with relative position. I keep seeing the image position with respect to the window rather than the parent div.

Here's a jsFiddle example of the problem I see. It has colored divs instead of images, but the problem remains. http://jsfiddle.net/HMSAM/15/

Appreciate any help in this matter. Thanks.

Upvotes: 1

Views: 1424

Answers (1)

albertedevigo
albertedevigo

Reputation: 18411

You are positioning that children by setting left: #px (pixels), and when resizing they keep that property.

If you want to recalculate the position on window resize, just use left: #% (percent). Children will keep the value on resize, but it will mean a different "size-in-pixels".

EDIT: Or you can recalculate it, via Javascript, of course.

Upvotes: 3

Related Questions