button position absolute not working as expected - html

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?

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

Answer 2

You can use calc to get the exact width minus the padding you get from the positioning:
width: calc(100% - 6px);
JSFiddle

Answer 3

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)

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%;
}

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.

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.

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;
}