Question

I have a interesting issue in terms of positioning a div.

I am using Relatively absolute positioning to position the child div b inside the parent div a. I know how to position them with their bottom edges aligned, using bottom:0px, but I need them to position so the top of B is aligned to the bottom of A, as shown in the diagram below.

Is there any way of doing this in CSS given that I can’t be sure the height of B. My current CSS is below.

The Aim –

HTML –

<div id="a">
     <div id="b"> </div>
</div> 

CSS –

#a{
   position: relative;
}

#b{
   position: absolute;
   bottom:0px;
}

Answer 1

I think you’re after top: 100%: http://jsfiddle.net/ysafx/

#a {
    position: relative;
    outline: 1px solid red
}

#b {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 5px;
    outline: 1px solid blue
}