Attach a div to a parent div that is responsive

Question

I am a bit new to the whole part of Javascript, CSS and HTML.

I'm trying to attach a div to the bottom and center of a parent div. There is a background image in the parent div which is responsive. My fa fa-arrow is attached to the bottom, and responsive in the vertical direction, not horizontal and neither centered.

Could any kind soul please explain how to solve this or tell me if I started off wrong!

Thanks in advance.

Here is my code:

HTML:

<div class="content-1">
  <div id="to-first">
   <i class="fa fa-angle-down"></i>
  </div>
</div> 

CSS:

.content-1 {
  position: relative;
}

#to-first {
  position: absolute;
  margin-right: 50%;
  bottom: 10;
  color: #000;
  font-size: 50px;
  text-align: center;
  cursor: pointer;
  display: none;
}

Javascript:

var main = function() {

$(document).ready(function() {
 $('#to-first').show(); 
});

$('#to-first').click(function() {
  $('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});    

};
$(document).ready(main);

And here is a jsfiddle:

https://jsfiddle.net/804jeg82/330/

Answer 1

Position your to-first in absolute, at the bottom of the content, and give it a width of 100%;

Give a height to your content, else it is empty with an element in absolute inside.

 .content-1 { position: relative; height: 500px; border: 1px solid red; } #to-first { position: absolute; width: 100%; bottom: 10px; color: #000; font-size: 50px; text-align: center; cursor: pointer; border: 1px solid green; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="content-1"> <div id="to-first"> <i class="fa fa-angle-down"></i> </div> </div>