Databases
StackOverflow2013
Postsdbo
POInput with display:block is not a block, why not?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInput with display:block is not a block, why not?
    text
    copied!<p>Why does <code>display:block;width:auto;</code> on my text input not behave like a div and fill the container width?</p> <p>I was under the impression that a div is simply a block element with auto width. In the following code shouldn't the div and the input have identical dimensions?</p> <p>How do I get the input to fill the width? 100% width won't work, because the input has padding and a border (causing a final width of 1&nbsp;pixel + 5&nbsp;pixels + 100% + 5&nbsp;pixels + 1&nbsp;pixels). Fixed widths aren't an option, and I'm looking for something more flexible.</p> <p>I'd prefer a direct answer to a workaround. This seems like a CSS quirk and understanding it may be useful later.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;width:auto&lt;/title&gt; &lt;style&gt; div, input { border: 1px solid red; height: 5px; padding: 5px; } input, form { display: block; width: auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;form&gt; &lt;input type="text" name="foo" /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I should point out I can already do this with wrapper workarounds. Apart from this screwing with the page semantics and CSS selector relationships I'm trying to understand the nature of the problem and whether it can be overcome by changing the nature of the INPUT itself.</p> <p>Ok, this is TRULY strange! I've found that the solution is to simply add <code>max-width:100%</code> to an input with <code>width:100%;padding:5px;</code>. However this raises even more questions (which I'll ask in a separate question), but it seems that width uses the normal CSS box model and max-width uses the Internet&nbsp;Explorer border-box model. How very odd.</p> <p>Ok, that last one appears to be a bug in Firefox 3. Internet&nbsp;Explorer&nbsp;8 and Safari&nbsp;4 limit the max-width to 100% + padding + border which is what the spec says to do. Finally, Internet&nbsp;Explorer got something right.</p> <p>Oh my god, this is awesome! In the process of playing with this, and with much help from the venerable gurus <a href="http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291" rel="noreferrer">Dean Edwards</a> and <a href="http://webfx.eae.net/dhtml/boxsizing/implementation.html" rel="noreferrer">Erik Arvidsson</a>, I managed to piece together three separate solutions to make a true cross-browser 100% width on elements with arbitrary padding and borders. See answer below. This solution does not require any extra HTML markup, just a class (or selector) and an optional behaviour for legacy Internet&nbsp;Explorer.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload