[html] Using CSS to align a button bottom of the screen using relative positions

I need to position a button to the bottom of the screen. I need to use relative size and not absolute sizes, so it fits any screen size.

my CSS code:

position:relative;
left:20%;
right:20%;
bottom:5%;
top:60%;

This question is related to html css

The answer is


The below css code always keep the button at the bottom of the page

position:absolute;
bottom:0;

Since you want to do it in relative positioning, you should go for margin-top:100%

position:relative;
margin-top:100%;

EDIT1: JSFiddle1

EDIT2: To place button at center of the screen,

position:relative;
left: 50%;
margin-top:50%;

JSFiddle2


<button style="position: absolute; left: 20%; right: 20%; bottom: 5%;"> Button </button>

This will work for any resolution,

button{
    position:absolute;
    bottom: 5%;
    right:20%;
}

http://jsfiddle.net/BUuSr/