Hello Friends, in this article I will explain you how to make div inside div at bottom or stay at bottom. This thing seems easy when we think about it about when we try to implement it, it need small trick and might be if you don’t know about it, it will take your lot of time. So I thought to share this on my site, So it will help someone precious time.

So there is one div and its id is ‘main_div’ now there is another div id is ‘inner_div’ in ‘main_div’. So we want ‘inner_div’ to stay at bottom of ‘main_div’. For example there is a block of content called ‘main_div’ and at bottom there is social icons in ‘inner_div’ and this div always stays at bottom check below image :

So above image is what we are going to achieve.

Here is HTML part of above image :

<div id="main_div">{main_div}
<!-- Content will come here -->
<div id="inner_div">{inner_div}
<!-- Social icons will come here and stays at bottom -->
</div>
</div>

Now CSS part :

#main_div{
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #000000;
}
#inner_div{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 50px;
    border: 2px solid #000000;
}

That’s it. You can see output of above HTML and CSS in below jsfiddle :

You can see in above jsfiddle inner_div is stay at bottom of main_div. Just remember main_div will have position relative and inner div will have position absolute with bottom:0 property and your both div will set properly.

I hope this will help someone and save time of someone. Let me know if you have any confusion in this in comments or have any other simple idea to achieve this.

I am PHP Freelancer, Hire PHP Developer India and PHP Freelancer India. If you have any projects related to WordPress or PHP you can contact me.