CODEWITHSUNDEEP
htmlcsspositioncss-position
Michael Allen
Michael Allen

Reputation: 5838

Fixed Position the top of a Div to the Bottom of Parent div

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 -

Diagram

HTML - 

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

CSS - 

#a{
   position: relative;
}

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

Upvotes: 4

Views: 5360

Answers (2)

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

If you don't know the height,

You must write the code like this:

CSS:

#a {
   position: relative;
   background: black;
   color: #fff;      
}

#b {
   position: relative;
   background: blue;
   color: #fff; 
}

HTML:

<div id="a">
    // Your code inside a
</div>
<div id="b">
    // your code inside b
</div>

See the Demo: http://jsfiddle.net/rathoreahsan/cKsVK/

Upvotes: -1

thirtydot
thirtydot

Reputation: 228302

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
}

Upvotes: 11

Related Questions