CSS - Overlapping divs

Question

I have no code to start with.

I want to add 2 divs overlapping on each other and then use the new CSS3 Rotate function. The effect I want to create is shown on this page

Requirements

• I don't want to use images
• I don't mind using CSS3
• It should be easy to align the whole thing in the center (which makes it harder to use position: absolute;).
• It's going to be content below the boxed content (which makes it harder to use position: absolute;).
• If it's possible without too much position: absolute; it's better.
• I prefer table free solutions.

Have fun!

Answer 1

Here is what I came up with:

http://jsfiddle.net/2mLTf/

If the jsfiddle will not work in the future, here is the source:

CSS

#paper {
width: 570px;
min-height: 300px;
float: left;
background: #fff;
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
z-index: 2;
-moz-box-shadow: 0 0 10px #DDD;
-webkit-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
border: 1px solid #DDD;
}

#page {
padding: 20px 0 20px 20px;
min-height: 500px;
background: white;
width: 560px;
margin: 0 auto;
float: left;
margin: 0px 0 20px -570px;
z-index: 3;
transform: rotate(0);
-moz-transform: rotate(0);
-webkit-transform: rotate(0);
-o-transform: rotate(0);
-moz-box-shadow: 0 0 10px #DDD;
-webkit-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
border: 1px solid #DDD;
}

#container {
padding: 20px 0 0 20px;
width: 590px;
margin: 0 auto;
overflow: hidden;
}

HTML

<div id="container">
<div id="paper"></div>
<div id="page"></div>
</div>

Answer 2

Altough you dont want to use images, you maybe should think about it. CSS3 is not supported by all browsers, and makes your page unuseable for a lot of potential users.

But, if you still want to do it, you would have to use position:absolute at least on the top div, otherwise you cant get one over the other. And then it should be easy to user the css3 roate on it.

Here is some help on rotation, so it would not only work for css3, but also for webkit and firefox 3.1+: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

Answer 3

I guess you could just use negative margins and z-index

#div1{width: 100px; height: 100px; float: left; z-index: 1;}
#div2{width: 100px; height: 100px; float: left; margin: 0 0 0 -50px; z-index: 2;}
#div3{width: 100px; height: 100px; float: left; margin: 0 0 0 -50px; z-index: 3;}

Answer 4

Thanks danixd! The code did not work but with some changes it did. Here is the result: http://www.devdevote.com/test/

The main "papers" are overlapped in the middle, works in all modern browsers except IE.

I might edit this answer later with a more clean solution of it.