I want simple header -> content -> footer sections in my div.
What I want to achieve is this: 
and this is my jsfiddle
I don't get it very well this relative layout which I tried to use for my footer. Relative layout should be looking for its parent element (in this case and based on main class to adjust bottom:0 to its bottom border of main class, however, it doesnt work in that way.)
Where I went wrong?
CodePudding user response：
Use Flex
.procedure-box {
border: 1px solid #ada9a9;
/* display: inline-block;*/ /*Remove this*/
display:flex; /*Add This*/
flex-direction:column; /*Add this*/
height: 350px;
width: 300px;
margin-right: 15px;
}
.header {
text-align: left;
margin-left: 15px;
margin-right: 15px;
}
.content-body {
text-align: left;
margin-left: 15px;
margin-right: 15px;
flex:1; /*Add this*/
}