I'm converting from using div
's as buttons to actual buttons, and now I need to make buttons fill the full width of the container.
Code:
.container {
background-color: #ddd;
padding: 10px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.button {
display: block;
background-color: #bbb;
margin: 10px;
padding: 10px
}
<div class="container">
<div class="button">
Fills the full width
</div>
<button class="button">
Does not fill the full width
</button>
</div>
Adding display:block
to .button
does not work (although I'm sure that has got to be part of at the answer?), and neither does left: 0; right: 0
. width: 100%
sort of works, but it ignores the container's padding property and makes the button go too close to the right side of the container.
Here is the JSFiddle: http://jsfiddle.net/mn40mz2n/