Question

It’s been a long day, and I’m sure that I must be missing something here, so please go easy on me if I am!

Let’s take the following HTML markup:

<div id="container">
    <button id="myButton">Some Text</button>
</div>

What I am wanting to do is to allow the button element to occupy all of the width afforded to it by div#container. Usually we can achieve this my setting the display property to block and removing any floats that might be imposed on the element (this works with other elements, such as anchors and spans).

However, by setting the CSS of button#myButton to the following, the button still only occupies the space of the text plus the padding I have applied:

button#myButton {
    display: block;
    padding: 5px 10px;
    font-weight: bold;
}

Can anyone explain why this might be happening. It is essential that this works in WebKit, and does not need to be cross-browser supported.

Answer 1

Set width: 100% with display: block or display: inline-block.

Example: http://jsbin.com/iwifon/edit