Question

So I was just messing around and had this brilliant idea to overlap three Ws on the screen. That part works fine. What I would like to do is then display a line or two of text underneath that. For whatever reason I can’t figure out how to get the text to display underneath the WWW, the div of text appears above it.

Here is my stylesheet…

body {
background-color:#000000;
color:#ffff00;
font-size:10pt;
font-family:arial;
}

#WWWHolder {
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
display:block;
}

.w {
font-size:400px;
font-family:times;
color:#f8f8f8;
position:absolute;
}

#w1 {
z-index:2;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#w2 {
z-index:1;
font-size:350px;
margin-left:225px;
margin-top:50px;
color:#d8d8d8;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#w3 {
z-index:2;
margin-left:395px;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


.YReg {
color:#ffff00;
font-size:10pt;
font-family:arial;
}

.WReg {
color:#ffffff;
font-size:10pt;
font-family:arial;
}

Here is my HTML code…

<div id="WWWHolder">
<div id="w1" class="w" title="Winslow">W</div>
<div id="w2" class="w" title="Web">W</div>
<div id="w3" class="w" title="Works">W</div>
</div>

<div class="YReg" style="text-align:center;">
Some Text Goes Here.
</div>

I’m sure this has to be an easy no brainer for some of you CSS experts out there.

Answer 1

Making an element absolutely positioned takes it out of the document flow, so if you inspect #WWWHolder, you’ll find it has 0 height.

To solve the problem, make #WWWHolder and #w1 position:relative;, and give #w2 and #w3 the styles top:0; left:0;, then it should work fine.

See: http://jsfiddle.net/kelervin/WKm3M/