position responsive fixed button to div container css - html

Question

I want to position a button responsively at the right bottom corner. So far I have put the button fixed to the centered container.
The Problem
If at any time I stretch the page (up and down , or side ways up and down) it disappears/looses focus for a slight second.
Expected:
I would like this yellow button to be vissible at all times, even if the browser is stretched.
Code:
.container{
margin:0 auto;
max-width:480px;
height: 50vh;
width: 100%;
text-align:center;
background:blue;
}
.fixed_button{
position: fixed;
bottom: 10px;
width: 70px;
height: 20px;/*height: auto;*/
margin-left: 405px;
border: 0px solid #d6d6d6;
z-index: 99;
padding: 0;
text-align: center;
background: yellow;
}
.spaces{
width: 100%;
height: 500px;
border: 1px solid #000;
}
<div class="container">
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="spaces"></div>
<div class="fixed_button"></div>
</div>
Also if you want to see the visibility effect, just open snippet , click full page and stretch your window around.
Container:blue & fixed button:yellow.
by the way, the container has a croll to load plugin, so it grows downwards anytime the user scrolls down the page, so .container growns and the button cant be positioned absolutely.

Answer 1

You can align a button at the bottom of a div by using position absolute. You can try changing your css to this.
.fixed_button{
position: absolute;
bottom: 5px;
right: 5px;
width: 70px;
border: 0px solid #d6d6d6;
//wrest of your styles
}
This should have the behaviour your looking for. Hope this helps

Answer 2

If you want the button fixed at the lower right bottom, you can use
position: absolute instead of fixed.
If you want responsive design, then don't use margin property with PX value. try to use with the percentage (%)
Try the following code snippet,
.fixed_button{
position: absolute;
bottom: 10px;
right: 10px;
width: 70px;
height: auto;
padding: 25px;
border: none;
z-index: 99;
-webkit-transform: translate3d(0,0,0);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
text-align: center;
}
I hope this will help,

Answer 3

As per your requirement, pure CSS solution won't work. You have to use Jquery to calculate the width of the container after window resize and then calculate the right position then assign it to your fixed element.
$(window).on('resize', function(){
var conwidth = $('.container').width()/2 - 30;
$('.fixed_button').css('left','calc(50% + '+conwidth+'px)');
});
.container{
margin:0 auto;
max-width:480px;
height:600px;
text-align:center;
background:blue;
}
.fixed_button{
position: fixed;
bottom: 0px;
left: calc(50% + 210px);
width: 30px;
border-radius:50%;
height:30px;
z-index: 99;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="fixed_button"></div>
</div>
So I did the calculation like get the container width and then divide it by two then minus the fixed element width. After that I applied it as left position for the fixed element.
Here is the JSFIDDLE you can play with it.