how to put one div to be a footer inside of a bigger main div

December 2, 2021

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 class="main" 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?

>Solution :

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*/
    }

https://jsfiddle.net/lalji1051/h3fm9nt0/1/