button position absolute not working as expected

Question

Can anyone explain why this button is not absolute-positioned to the right? I would expect it to be 3px from every edge.

HTML:

<div class="wrapper">
    <button>Hello world</button>
</div>

CSS:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

Also, how is it that the button is able to align its contents vertically?

Gallman

Here's a fiddle to play with: jsfiddle.net/p6ptns5a/1 – Psychiatry

Weird thing is, it works with a div: jsfiddle.net/p6ptns5a/11 – Mobility

Really? Not only are people not answering the "Can anyone explain why" part of a question, but people are actively trying to edit it out of the question? Why? – Sectarianize

Answer 1

button, like most form elements, is a replaced element. Replaced elements behave differently from regular non-replaced elements (such as div) when absolutely positioned. The following two points from section 10.3.8 of CSS2.1 apply:

1. The used value of 'width' is determined as for inline replaced elements. If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below.

...

6. If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

The width of the button is determined not based on the specified offsets, unlike for non-replaced elements, but by the contents of the button itself. Since the used value of width is not auto, and the specified values of left and right are not auto, the values are over-constrained and the browser is forced to ignore right in order to respect width.

If you want the button to fill the entire height and width of the wrapper, don't use absolute positioning. Instead, specify 100% height and width on the button, and use padding on the wrapper to offset the button:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
    box-sizing: border-box;
}

.wrapper button {
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <button>Hello world</button>
</div>

(If you can't use box-sizing, subtract the padding from the dimensions of the wrapper.)

The vertical alignment of the text probably has to do with how the browser draws button controls by default, which is usually based on system button controls.

Sectarianize

Answer 2

You might want to use inherit/100% value for width and height css properties.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
}
.wrapper button {
    width: inherit;
    height: inherit;
}

Fiddle

NOTE: If you want to have the dimensions exactly 300 then subtract padding. (which will be 294px)

Clinometer

Answer 3

You can use calc to get the exact width minus the padding you get from the positioning:

width: calc(100% - 6px);

JSFiddle

Rabb

Answer 4

please use below css ..

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
    padding: 3px
}
.wrapper button {
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

Shapeless

Answer 5

I think you are trying to put button in center.You declared top and left 3px so no matter what you define bottom and right button is going to to be 3px from top and left ignoring other.To put button in center use marginFirst define width of button and set marginLike thia

.

wrapper button{
  Width:100px;
   margin:0px auto;

}

not margin doesn't work with absolute position.

Gunpowder

Answer 6

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;width:97.5%;
    right: 3px;
}

Try this.

Lovett

please add relevant information why code in your answer will work and why code in question doesn't work , – Artair

Answer 7

You need to set the width of the button, to make it fill the space.

The easiest way to do this is to set it to the correct size.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 294px;
    width: 294px;
}

Choppy

The padding applies to the button's content, not to the external edges, so this won't give me what I want. – Gallman