HTML & CSS: How to Create a Fluid Width Stack of Paper With a Single Element

Last year WebDesign.Tutsplus published a short tutorial showing how to create a stack of paper using a single html element and some css. It was nice little tutorial but the end effect wasn’t fluid. It relied on hard coded widths and so didn’t look very nice when it scaled.

I felt that making the boxes a fluid width was something I could do so I made a quick demo showing how to create fluid width stacks of paper. While I was at it I also added some subtle drop shadows for extra depth.

The secret for making this work is not using fixed width elements for the pages and instead using percentages – and then centering the elements. Since the before and after pseudo elements are absolutely positioned I set the left position to 50% and then used translateX(-50%) to push the element back over again.