3

How to position a div inside another div that needs to be aligned to the bottom and centered? Has to be responsive, using bootstrap.

Example

<div class="parent">
    <div class="sibling">
    ...
    </div>
</div>

.parent{
    width: 800px;
    height:400px;
    background-color:red;
}
.sibling{
    width:300px;
    height:50px;
    background-color: green;
}

Note: I can't use position:absolute;

Computer's Guy
  • 5,122
  • 8
  • 54
  • 74

2 Answers2

7

Here with the help of a wrapper element:

.parent{
    width: 800px;
    height:400px;
    background-color:red;
    position: relative;
}
.sibling{
    width:300px;
    height:50px;
    background-color: green;
    margin: 0 auto;
}
.wrapper{
    width: 100%;
    position: absolute;
    bottom: 0;
}

jsFiddle

AlexG
  • 5,649
  • 6
  • 26
  • 43
  • If the `position: absolute;` breaks your design just give the parent a bottom padding with the height of the sibling element – AlexG Apr 15 '15 at 13:44
1

Use position absolute for the sibling and position relative for the parent

fiddle

    .parent {
        position: relative;
        width: 800px;
        height:400px;
        background-color:red;
    }
    .sibling {
        bottom: 0;
        left: 50%;
        margin-left: -150px;
        position: absolute;
        width:300px;
        height:50px;
        background-color: green;
    }
AC3
  • 335
  • 1
  • 4
  • 20
  • I don't think it's very likely to do this without absolute positioning. Check out this [post](http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom) – AC3 Apr 15 '15 at 12:33
  • One of the top comments there suggest that you work with a table. If tables don't break your design off course ;) – AC3 Apr 15 '15 at 12:35