CODEWITHSUNDEEP
htmlcss
Eric
Eric

Reputation: 97691

How can I prevent a <button> shrinking to the size of it's content?

I have two elements in a container:

<div class="container">
    <span>This is a div</span>
    <button>This is a button</button>
</div>

Styled as follows:

span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    margin: 5px;
    background: #c0c0c0;
    font: inherit;
}

.container {
    border: 1px solid black;
}

You can see a live demo here.

Why does the button not appear the same width as the span? How can I make the button behave like a standard block-level element?

I need to use a <button> here because its purpose is to submit the form.

Upvotes: 7

Views: 7289

Answers (7)

thirtydot
thirtydot

Reputation: 228302

I'm expecting there to be some ruleset that makes them both behave like <div>s

There isn't. The reason is that button is a "replaced element".

The clearest source I could find on this was: http://reference.sitepoint.com/css/replacedelements

A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.

Upvotes: 2

Drake
Drake

Reputation: 3891

http://jsfiddle.net/925qz/30/

How I corrected it: The padding for left and right is set but the all around its managed by the container The width is 100% for the button. Lastly the button's separation is managed by top 5px margin.

span, button {
    display: block;
    padding-top:4px;
    padding-bottom:4px;
    border: 1px solid black;
    background: #c0c0c0;
    font: inherit;
}

button{
    margin-top:5px;
    width:100%;  
}

.container {
    border: 1px solid black;
    padding:5px;
}

Upvotes: 0

tw16
tw16

Reputation: 29625

This should do the trick. Live example: http://jsfiddle.net/925qz/18/

.container {
    border: 1px solid black;
    padding: 5px;
}
span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    background: #c0c0c0;
    font: inherit;
}
button{
    width:100%;
    margin-top: 5px;
    text-align: left;
}

Upvotes: 2

js-coder
js-coder

Reputation: 8346

When you apply a width of 100% (like block elements usually have) to the button it will ignore the padding! I had this problem a few days ago:

<button> padding / width problem

If u want to fill out all of the width and apply padding, this should do the job:

button {
    width: 100%; 
    /* prefixes for box-sizing here */
    box-sizing: content-box;
}

Of course the total width will be 100% + the padding, so it'll be more than you want. You may have to take a fix width, because of that.

Upvotes: 0

DanMan
DanMan

Reputation: 11572

Form elements use a different box-model in pretty much every browser. That’s why they never actually have the same size as the other elements, even if all have the same dimensions set. I also found a bug report from Firefox for this problem: https://bugzilla.mozilla.org/show_bug.cgi?id=562153

I always put the following code in my reset stylesheet to have a more even working ground:

select, input, textarea, button {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

The code works from IE8 and up and all other major browsers, according to PPK: http://www.quirksmode.org/css/contents.html

Upvotes: 0

Bjorn
Bjorn

Reputation: 71970

Browsers often ship with divergent default styles for many elements. Header elements such as h1 and h2, ul, strong and em all are styled with default CSS. A general tactic is to use something like the Yahoo! reset css stylesheet to remove these styles for better cross-browser appearance.

This would not immediately help with your button problem, but partly explains it. Internally, complex elements within browsers such as the button are defined by HTML that you don't have access to as a user. This internal HTML is also styled via CSS. In the case of a button you'll have to use explicit CSS to style it in ways other than the browser has been instructed to. Give it a width and understand that internal padding rules may give it divergent appearance from a div or span with similar rules.

Upvotes: 0

Sujith Surendranathan
Sujith Surendranathan

Reputation: 2579

Separate the span and button selectors, then add width to the button selector.

Upvotes: 1

Related Questions