How do I put one div to be a footer inside of a bigger main div?

Question

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 doesn't work in that way.)

Where did I go wrong?

Take a look at [this answer](https://stackoverflow.com/a/20352949/16688813). — Tom, Dec 02 '21 at 10:32

Lalji Tadhani · Accepted Answer · 2021-12-07T08:48:15.550

4

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;
        justify-content:space-between; /*Update this*/
    }
    .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/

https://jsfiddle.net/lalji1051/h3fm9nt0/3/ Updated answer

edited Dec 07 '21 at 08:48

answered Dec 02 '21 at 10:34

Lalji Tadhani

14,041
3
23
40

can you please update your answer in case if no `
` element between header and footer. Now it's a case that button goes up, if I delete `
` section entirely. Thanks
– Stefan0309 Dec 06 '21 at 22:03
1

update my answer check now. – Lalji Tadhani Dec 07 '21 at 08:48

How do I put one div to be a footer inside of a bigger main div?

1 Answers1