Search code examples
csspositionmarginfixed

Fixed position of button in the middle of fixed page


my page has one big div with fixed width, like this:

#index_body{
  width: 1010px;
  background-image: url('images/main_bg_dark.png'); 
  margin: auto;
  overflow: hidden;
  min-height: 50px;
  padding-bottom: 10px;
  border-radius: 7px;
  -moz-box-shadow: 0 5px 15px #000000;
  -webkit-box-shadow: 0 5px 15px #000000;
  box-shadow: 0 5px 15px #000000;
}

I want to add button (20x20px) on the right side of page (vertically in the middle) - still next to index_body.

So the button has code, like this:

#butt {
  width:20px;
  height:20px;
  background: url('images/scrollUp.png');
  position:fixed;
  top:50%;
  left:WHAT SHOULD BE HERE??
}

Because it depends on actual resolution. My index_body is always centered. if I change resolution my button is moved to the left-right...


Solution

  • ok, it should be just like this:

    #butt {
      width:20px;
      height:20px;
      background: url('images/scrollUp.png');
      position:fixed;
      top:50%;
      margin-left: 1010px;
    }