Question

On a page i have two divs lets say Left_Div and Right_Div. On right div i have multiple images positioned using Top and Left properties of CSS. Left_Div is used as a left panel and On a button click I animate Left_Div and Right_Div to slide right and Left_Div becomes visible. Just like left menu on facebook iphone app.

 $("#Right_Div").animate({ marginLeft: "600px" }, 500);    
 $("#LeftDiv").animate({ width: "600px", opacity: 1 }, 500);

The problem is that when Left_Div and Right_Div slide then images that are positioned by using Left and Right attributes do not move and as a result they overlap Left_Div. Anyone please help me how i can move images with DIVs.

I don’t want to rest top/left properties again because there are so many images and they are loaded dynamically.

I hope that i have explained my question 🙂

Answer 1

If you want dynamic movements you cannot give exact positions.

By saying an image is a set amount of pixels from the left the image will always be exactly there, no matter what.

You would have to use a floating logic whereby you assign for example float: left or float: right to all your components you want to line up beside each other on the left or right.

Then when you are moving an element all other elements which are set to float beside it will move along with it.

DEMO – floating example using your animation logic

In the DEMO you can now see how elements move with each other when when floating is applied.

The DEMO above has the following HTML:

<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:

#Left_Div, #anotherLeftdiv{
    float: left;
}

#Right_Div, #anotherRightdiv{
 float: right;   
}

Script:

$("#Left_Div").animate({ width: "150px", opacity: 1 }, 500);
$("#anotherRightdiv").animate({ marginRight: "100px" }, 500);    

I hope this makes sense. Without your exact current CSS and HTML it is hard to tell you exactly what it is you have to change.

Edit
I added 4 images to the right div and placed them into the 4 corners using float and clear instead of fixed positioning.

They will simply move along with the animation of the div, as long a they do not get any fixed positions.

DEMO – Animation with floating images

The images are in a div container, by using float: left and clear: rightfor example you are telling the image to go all the way to the left and force a break to the right of it. Thus any other image using float: left will be forced to go in the row below.

The same applies to the float:right and clear: right, those settings force the image to stay right and force a break to the right of it, forcing any other float: right to go into the line below.

See the images 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>​

The styles to force images into their corners:

img.left{
    float: left;
    clear: right;
}

img.right{
    float: right;
    clear: right;
}

I hope this helps. You should have plenty to play around with now.

If you come across any issue now with your specific implementation or any CSS you can’t work out, it would be easier to complete this question and ask a new one posting the specific code you are having issues with.