CODEWITHSUNDEEP
htmlcss
Cybercampbell
Cybercampbell

Reputation: 2606

CSS Layer 3 div in a container div on top of each other

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.

Upvotes: 1

Views: 9405

Answers (2)

Syntax Error
Syntax Error

Reputation: 4527

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;
}

Upvotes: 2

Doozer Blake
Doozer Blake

Reputation: 7797

Other than the change to block level elements. It sounds like a pretty straight-forward implementation you are after with some positioning getting them to be stacked atop one another.

I put together a sample at http://jsfiddle.net/AjuaV/2/

You would want inside-middle to be a block level element as well, as text-align doesn't do anything with an inline element like span.

Upvotes: 1

Related Questions