CODEWITHSUNDEEP
csscss-floatcss-position
DMIL
DMIL

Reputation: 703

Absolute positioning and float left/right

This is apparently contradictory. What I need is to have two child elements positioned at the left and right edges of the parent element while vertically centered and overlaid over all other sibling elements.

Upvotes: 2

Views: 28804

Answers (2)

Tesserex
Tesserex

Reputation: 17314

You can use left and right for that.

.child
{
    position: absolute;
    top: 50%;
}

.child .left
{
    left: 0;
}

.child .right
{
    right: 0;
}

The top: 50% will align the top edge of the child to halfway down the parent. If your parent has a constant size, use pixel sizing. Otherwise you'll probably need some javascript to get it exactly right.

edit in response to comment:

To make it relative to the parent instead of the page, you need to give the parent position: relative; and it will work. The default position is static and that won't work for this.

Upvotes: 10

d-_-b
d-_-b

Reputation: 23171

If I undestand correctly:

<div class="parent" style="position:absolute;height:70%;width:70%;top:15%;left:15%;background-color:#eee;border:solid blue 1px;">
    <div class="left" style="position:absolute;width:30%;height:70%;top:15%;left:0%;background-color:black;z-index:20;">left box vertically aligned</div>

    <div class="right" style="position:absolute;width:30%;height:70%;top:15%;left:70%;background-color:black;z-index:20;">right box vertically aligned</div>
</div>​

see : http://jsfiddle.net/dankpiff/zmYEf/

If you set the elements underneath with a lower z-index they will be covered by the 'left' and 'right' boxes

Is this what you mean?

Upvotes: 0

Related Questions