CODEWITHSUNDEEP
csspositionmarginfixed
user1666761
user1666761

Reputation: 163

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...

Upvotes: 0

Views: 13752

Answers (3)

Wez
Wez

Reputation: 10712

Instead of setting the left or right position, make sure the button element is inside the index element and then use a margin.

margin: 0px 0px 0px 1010px;

Here is a tested and working version with your code - http://lukewakeford.co.uk/testsite/blackbutton/

Upvotes: 1

user1666761
user1666761

Reputation: 163

ok, it should be just like this:

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

Upvotes: 0

whtlnv
whtlnv

Reputation: 2217

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

  right: 10%;
}

The 10% is an example, change to a percentage that looks good, and it should be responsive to screen resolution.

On the other hand, why would you want a fixed element INSIDE a fixed container? just make it absolute and float it to the right with a margin.

Upvotes: 0

Related Questions