Question

I need to layer 3 div inside a container div and have them all on top of each other. How do I go about this?

this is the html:

<div class="outer">
    <div class="top"></div>
    <div class="middle"><span class="inside-middle"></span></div>
    <div class="bottom"></div>
</div> 

.outer is the container and .top, .middle and .bottom are all on top of eachother and are all the same height and width.

.inside-middle with have text in it aligned to the right.

Any advice is much appreciated.

Answer 1

Here’s an easier to read edit. Colored borders added for your convenience…

.outer{
position:relative;
height:200px;
width:200px;
border:solid blue 1px;
}

.top, .middle, .bottom{
height:200px;
width:200px;
border:solid red 1px;
top:0;
left:0;
position:absolute;
}

.bottom{
border:solid orange 1px;
}

.middle{
border:solid green 1px;
}

.inside-middle{
text-align:right;
display:block;
}