slayer slayer - 5 months ago 14
CSS Question

Append multiple child div to parent div

I want to append all the child divs to the bottom of parent div.
Here is my code so far:



.valign {

display: inline-block;

width: 100%;

position: relative;

}

.block {

display: inline-block;

max-width: 75%;

}

.red {

float: left;

padding: 10px;

background-color: red;

}

.yellow {

float: left;

padding: 10px;

background-color: yellow;

}

.green {

float: left;

padding: 10px;

background-color: green;

}

<div class="valign">
<div>
<div class="block red">my bottom aligned div 1</div>
<div class="block yellow">my bottom aligned div 2</div>
<div class="block green">my bottom aligned div 3</div>
</div>
</div>





jsBin: http://jsbin.com/bahasotofo/edit?html,css,js,output

I've gone through multiple suggestions for the same question but I couldn't find a solution.

Answer

If you want every child to be appended vertically, use this CSS:

.block {     
    display: inline-block;
    max-width: 75%;
    clear:both;
}