CODEWITHSUNDEEP
htmlcss
Alice Xu
Alice Xu

Reputation: 543

Position fixed and margin on right confusion

button{
    
    position:fixed;
    bottom:0;
    width:100%;
    background:#000;
    color:#fff;
    padding:10px;
    margin:10px;
}
<button>Buy Now</button>

Why my button is not centered? It seems like more the right. Why does position fixed doesn't relative to the body's width?

Upvotes: 2

Views: 1109

Answers (9)

Helkern
Helkern

Reputation: 33

Try like this:

button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 10px;
}

HTML:

<button>Buy Now</button>

Upvotes: 1

leezard
leezard

Reputation: 43

It is the trickery of the margin that had you confused. Because your button have margin: 10px;, your button will now have an extra width of 20px (10px left and right). You will have to reduce the 100% width by 20px. Hence, the width: calc(100% - 20px);

button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 10px;
}
<button>Buy Now</button>

or you could remove the margin.

Upvotes: 2

Ashwyn Joshi
Ashwyn Joshi

Reputation: 11

I hope you want to know the reason why you div is always overflowing to right even when margin right-is used. So brother, you must know that the default property of every block level element is to float left and uses the browser left edge as the initial scale. So the elements tend to overflow right taking margin from left not right.

YOu must use below code: 

buttom{

position:fixed;
bottom:0;
left:0;
width:calc(100% - (X*2)px);// X is the margin you give. X * 2, its because margin-left + margin-right.
background:#000;
color:#fff;
padding:10px;
margin:Xpx;

}

Upvotes: 1

Felix A J
Felix A J

Reputation: 6480

Add a wrapping div.

.btn{
position:fixed;
bottom:0;
left: 0;
right: 0;
margin:10px;
}
button{
width:100%;
background:#000;
color:#fff;
padding:10px;
}
<div class="btn">
<button>Buy Now</button>
</div>

Upvotes: 1

Ravichandra
Ravichandra

Reputation: 115

button{
    position:fixed;
    bottom:0;
    left: 50%; /* <- Set the left property always. */
    right: 50%;
    width:100px;
    margin: 0 auto; 
    background:#000;
    color:#fff;
    padding:10px;
}

<button>Buy Now</button>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

HI now remove your width or margin and define to left right top bottom according to your design .

and now change your button to span or div as like this

span.btn{
    
    position:fixed;
    bottom:10px;
    background:#000;
    color:#fff;
    padding:10px;
    right:10px;
    left:10px;
}
<span class="btn">Buy Now</span>

Upvotes: 3

akash
akash

Reputation: 2157

button{
    
    position:fixed;
    bottom:0;
    left:0;
    width:calc(100% - 20px);
    background:#000;
    color:#fff;
    padding:10px;
    margin:10px;
}
<button>Buy Now</button>

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115099

From the other answers and comments I think you want this.

button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 20px);
  background: #000;
  color: #fff;
  padding: 10px;
  margin: 10px;
}
<button>Buy Now</button>

Upvotes: 2

Tejas
Tejas

Reputation: 711

The margin is messing with your page. What you need to do is this:

button{
    
    position:fixed;
    bottom:0;
    width:90%;
    left: 0; /* <- Set the left property always. */
    right: 0;
    margin: 0 auto; /* left: 0, right: 0, margin: 0 auto sets the appropriate margins. */
    background:#000;
    color:#fff;
    padding:10px;
    /* margin: 10px; <- NO MARGIN! */
}
<button>Buy Now</button>

Upvotes: 1

Related Questions