CODEWITHSUNDEEP
htmlcssvertical-alignment
databot
databot

Reputation: 131

Vertically align a child div to a parent div in a responsive website

I would like to vertically align the child div to the bottom of the parent div. This is for a responsive website, so I understand there are ways in using a table, but none of it seems to provide me with an exact answer that would perform in the correct way across modern browsers, including iOS. Any help would be amazing! Thanks

#parent {
width: 32%;
height: 242px;
background-color: red;
}

#child {
width: 100%;
height: 57px;
background-color: green;
}

#text {
background-color: yellow;
width: 100%;
height: 40px;
}


<div class='box' id='parent'>
    <div class='box' id='child'>
        <div class='box' id='text'></div>
    </div>
</div>

Upvotes: 0

Views: 1155

Answers (4)

daviestar
daviestar

Reputation: 4641

I have a neat way to vertically (and horizontally if needed) align something to the parent which is always responsive. The child element doesn't need an explicit width or height, so it can also scale if you want. The downside is you have to add an extra element to the dom. I've been using it for years and it even works down to IE 5.5 with a little hack.

.parent {
    width: 50%;
    height: 500px;          /* height is needed */
    text-align: center;     /* adjust to suit */
    font-size: 0;
}
.parent > * {
    *display: inline;       /* fix for IE 7 and below */ 
    display: inline-block;
    vertical-align: bottom; /* adjust to suit */
    white-space: nowrap;
}
.align {
    width: 0;
    height: 100%;
}
.child {
    max-width: 100%;
    font-size: 1rem;        /* remember to set font-size on html tag */
}

and the markup:

<div class="parent">
    <span class="align"></span>
    <img class="child" src="http://placehold.it/150x150" />
</div>

Upvotes: 0

AlexTroy
AlexTroy

Reputation: 405

You can use :after solution.

HTML

<div class='box' id='parent'>
    <div class='box' id='child'>
        <div class='box' id='text'></div>
    </div>
</div>

CSS

#parent {
    width: 32%;
    height: 242px;
    background-color: red;
    position: relative;
    white-space: nowrap;
}
#parent:after {
    content:'';
    width: 1px;
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
}
#child {
    width: 100%;
    height: 57px;
    background-color: green;
    white-space: normal;
    display: inline-block;
    vertical-align: bottom;
}

#text {
    background-color: yellow;
    width: 100%;
    height: 40px;
}

Here the DEMO

Upvotes: 2

SKeurentjes
SKeurentjes

Reputation: 1878

Give the parent a position: relative;, and the child position: absolute and bottom: 0;

#parent {
    position: relative;
    width: 32%;
    height: 242px;
    background-color: red;
}

#child {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 57px;
    background-color: green;
}

Example: http://jsfiddle.net/skeurentjes/rLhdc/

Upvotes: 0

MilkyTech
MilkyTech

Reputation: 1927

position:relative; on the parent and position:absolute; bottom:0; on the child

jsFiddle

#parent {
    position: relative;    
width: 32%;
height: 242px;
background-color: red;
}

#child {
    position: absolute;
    bottom:0;
width: 100%;
height: 57px;
background-color: green;
}

Upvotes: 1

Related Questions