how to set float and non float element vertical align to bottom - html

Question

I'm running this JSFIDDLE and I want to set the vertical-align property to bottom for both the float and non-float elements, but it doesn't work :
Here is my html code :
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS :
div {
border: 1px solid;
}
.main {
text-align: center;
}
.main:after {
content: '';
clear: both;
display: block;
}
.main > div {
vertical-align: bottom;
width: 20%;
}
.left {
height: 60px;
float: left;
background-color: red;
}
.right {
height: 40px;
float: right;
background-color: blue;
}
.middle {
height: 20px;
background-color: green;
display: inline-block;
}

Answer 1

Unless you're using with a table cells, vertical-align aligns the element with respect to adjacent elements, in particular text.
Read more about vertical alignment here:
http://phrogz.net/css/vertical-align/index.html
What you can do though is give your wrapper a width, height, and set it it to position: relative
After that you can use absolute positioning for your divs, set them to bottom: 0 they will then stick to the bottom of the wrapper.
Here is new CSS:
div {
border: 1px solid;
}
.main {
position: relative;
width: 100%;
height: 100px;
text-align: center;
}
.main:after {
content: '';
clear: both;
display: block;
}
.main > div {
width: 20%;
}
.left {
height: 60px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.right {
height: 40px;
background-color: blue;
position: absolute;
bottom: 0;
right: 0;
}
.middle {
height: 20px;
background-color: green;
position: absolute;
transform: translate(-50%, 0%);
left: 50%;
bottom: 0;
}
CODEPEN DEMO