element on right side of window overlapped on window resize

Question

I have two sets of (jQuery mobile) buttons on the left and right hand side of a page. When I shrink the window from the left side, the left hand set of buttons moves as expected, keeping some space between itself and the window border. But when I shrink form the right side, the window overlaps the set of buttons on that side.

How can I avoid this? I would like to have both sets of buttons retain their percentage horizontal position whether I shrink the screen from the right or left. (WhenI shrink from the bottom, both sets of buttons retain their space from the top border of the window).

css:

   #mainPage{
position:relative;

}

.subMenuClass{  /* right side */
display: none;
position: absolute;
z-index: 10000;
top: 2%;
left:85%;

}

 .mainMenuClass{      /*left side*/
display: none;
z-index: 10000;
position:absolute;
top: 2%;
left: 5%;

}

Answer 1

.subMenuClass{  /* right side */
display: none;
position: absolute;
z-index: 10000;
top: 2%;
right:5%; /*change to this,you may need to adjust the value*/
}