trying to stop horizontal scrolling

Question

I have created a div and set its initial position

<div class="guide" >
<style>
  .guide{
    height:150px;
    width:200px;
    position:absolute;
    right:-170px;
    top: 10%;
  }
</style>

What i want when i click on the div it should comeout from right side. The problem is window is providing hrizontal scroll, so if a person scrolls to right the div is compltely visible. I want to stop horizontal scroll so that if the user click on div then only its visible. Now if any body explain that why its going after -ve pixels, becouse sometime it doesn't go beyond -ve px, sometime it goes, why?

Answer 1

Hide vertical scrollbar of a parent div by using

overflow-x: hidden;

Answer 2

Horizontal Scrollbar : overflow-x: hidden;

Vertical Scrollbar : overflow-y: hidden;

both: overflow: hidden;

Answer 3

Add overflow-x: hidden; to the Parent element.