css sliding content transition

Question

I am designing a new page for my website and I have had an idea about sliding content in from the right. In my head this would work by creating separate divs for what would usually be content separated through different pages; i.e. <div id="home_content">, <div ="about_content"> and <div ="contact_content">. Then once a link is clicked, instead of having the new page load, the content in the relevant div will slide in from the right.

I also require that the content divs have a property of 100% width so that it looks right on various resolutions and if a window is re-sized.

Can someone explain how I could achieve this?

Many thanks

Answer 1

Welcome to SO! I think the best practice is using CSS3 transition with width: 100% and margin-left. It makes the transitions very smooth and the only thing you have to do in JS is changing the classes. See the example: http://jsfiddle.net/Stocki/jGbhh/

I hope it helps!