I am creating a social site and on the posts div at the bottom of the div, I want to have a footer with options that stays at the bottom of the screen.

But as of right now, if I scroll on the div the footer goes up with the content. I want it to stay at the bottom no matter what.

The main answer I keep seeing is this `(parent).wrapper{position:relative;} )footer).bottom{position:absolute; bottom:0;}`

I've tried it multiple times in different ways but none of them solved this problem and I have been at it all day. Can someone please help me ?

```
 echo "<div class='sub_topics_column'><a href='post.php?postses_id=$post_id'>

     <a href='post.php?postses_id=$post_id'><div class='sub_parent'>

         ...

     </div></a>

    <div class='sub_footer'>

    <div class='comments_footer'>

         <div onClick='javascript:toggle$subtopic_id(event)'
                                        class='newsfeedPostOptions'>

                                        &nbsp;Comments($comments)&nbsp;&nbsp;&nbsp;

         </div>

         <div class='post_comment' id='toggleComment$subtopic_id'
                                    style='display:none;'>
              <iframe src='comment_frame.php?subtopic_id=$subtopic_id'
                                         id='comment_iframe'
                                        frameborder='0'></iframe>
         </div>

         </div>

         <form method='post' target='frame'>

             <div class='save_footer'>

                 <input style='display: none' type='text' name='current_user'
                                        value=$userLoggedIn />

                 <input style='display: none' type='text' name='post_id'
                                        value=$subtopic_id />

                                       $bookmark_ele

            </div>

           </form>

          <div class='report_footer' onclick='optionsFunction()'>

               <button role='button'>Report</button>

          </div>

          <div class='votes_footer' onClick='javascript:toggle$subtopic_id(event)'>
                                    <iframe id='iframe1' width='49' height='30' scrolling='no'
                                    src='likes.php?post_id=$post_id' ></iframe>
                                </div>

                            </div>

         </div></a><br><br>";

```

styles.css:

```
.sub_topics_column {

margin-top: 1%;
left: 15%;
width: 45%;
height: 475px;
border: 1px solid #8c8c8c;
border-radius: 3px;
background-color: white;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}

.sub_parent {

top: 2%;
left: 2%;
width: 95%;
height: 100px;
display: flex;
position: relative;
}

.sub_topics_column .sub_footer {

bottom: 0;
left: 0;
height: 33px;
width: 100%;
display: flex;
border: 1px solid #000;
position: absolute;
}

```