To achieve dynamic movements, it is important not to specify exact positions for elements.
When you define an image as being a specific number of pixels from the left, that image will always remain in that exact position regardless of other elements.
Instead, utilize floating logic by applying float: left or float: right to components you want to align beside each other on the left or right side.
By doing this, when one element moves, all other elements set to float beside it will move accordingly.
DEMO - showcasing how elements move together with floating applied
The provided DEMO illustrates how elements interact and adjust when floating properties are implemented.
This demonstration includes the following HTML structure:
<div id="Left_Div">My left div</div>
<div id="anotherLeftdiv">My other left div</div>
<div id="anotherRightdiv">My other right div</div>
<div id="Right_Div">my right div</div>
CSS used:
#Left_Div, #anotherLeftdiv{
float: left;
}
#Right_Div, #anotherRightdiv{
float: right;
}
JavaScript code snippet:
$("#Left_Div").animate({ width: "150px", opacity: 1 }, 500);
$("#anotherRightdiv").animate({ marginRight: "100px" }, 500);
Hopefully, this explanation clarifies the concept. Adjusting your CSS and HTML based on this floating technique should yield the desired results.
Edit
I included four images within the right div positioned at the corners using float and clear, rather than fixed positioning.
These images will move along with the div's animation, as long as they do not have fixed positions.
DEMO - Animation featuring floating images
The images are wrapped in a div container, employing float: left and clear: right to guide their placement to the corners.
Similar rules apply to float:right and clear: right, ensuring images stay aligned to the right edge and forcing others to drop down to the next line.
Review the image setup in the HTML:
<div id="Right_Div">
<img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png"/>
<img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Script.png"/>
<img class="left" src="http://www.fileden.com/files/2012/6/19/3318010/Ok.png"/>
<img class="right" src="http://www.fileden.com/files/2012/6/19/3318010/Decrease%20time.png"/>
</div>
Styles utilized for positioning images in corners:
img.left {
float: left;
clear: right;
}
img.right {
float: right;
clear: right;
}
This information should provide ample guidance for experimentation and adjustments.
If you encounter any challenges during implementation or struggle with specific CSS issues, consider posting detailed code examples in a new question for further assistance.