Question

I have a div that covers the entire page width=100% and height=100%. I want usign jquery.animate to animate the div to horizontally center with a smaller width i.e 800px

Answer 1

It all depends on your CSS and how flexible you are.

Here is an example of one way to do it:

http://jsfiddle.net/2Qxwn/

In this case, I position the div relative, and use jQuery to set the initial height/width to the width of the document. I also set the left position to 50%, and the margin-left to half of the width (thus pulling it back to center). I then animate the width and the margin-left accordingly.

You can also use the margin: auto method of centering, and then you only have to animate the width, but I am always leery of this method of centering:

http://jsfiddle.net/2Qxwn/1/