/* Initially, the text was not large enough to clearly occupy a higher visual layer (z-index?) than the divs themselves.
Once I made the font-size 3em, it was an obvious (and kinda cool!) effect.  In IE 5.2, however, the text never came 'unglued'
from the divs, so the Z div covered the bottom of the Ys. 

I like this layering effect of divs with negative margin.*/

* {margin: 0; padding: 0;}
body {background-color: #FFF; color: #000;}

#content * p {
    text-align: center;
    font-size: 2.3em;   /* floating text was more noticeable at larger font-size */
    font-family: Harrington, times, "zapf chancery", "apple chancery", impact, sans-serif;
}

#content {
    color: #000;
    background-color: #EEE;
    width: 600px;
    margin: 0 auto;
    padding: 50px 0;
}

#Div1, #Div2, #Div3 {
    color: #000;
    height: 50px;
}

#Div1 {
    background-color: #BCCBDC;
    border: 2px solid #354B64;
}
#Div2 {
    background-color: #E1EDF3;
    border: 2px solid #4387D2;
    margin: -20px;
}
#Div3 {
    background-color: #B3D2E0;
    border: 2px solid #267073;
}