tags:

views:

1065

answers:

7
+8  Q: 

input with display:block is not a block, why not?

Why does display:block;width:auto; on my text input not behave like a div and fill the container width? 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?

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 1px + 5px + 100% + 5px + 1px). Fixed widths aren't an option, I'm looking for something more flexible.

I'd prefer a direct answer to a workaround, this seems like a CSS quirk and understanding it may be useful later.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>width:auto</title>

<style>
div, input {
 border: 1px solid red;
 height: 5px;
 padding: 5px;
}
input, form {
 display: block;
 width: auto;
}
</style>
</head>

<body>
    <div></div>
    <form>
     <input type="text" name="foo" />
    </form>
</body>
</html>

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

EDIT 2: Ok, this is TRULY strange! I've found that the solution is to simply add max-width:100% to an input with width:100%;padding:5px;. However this raises even more questions (which i'll ask in a seperate question) but it seems that width uses the normal CSS box model and max-width uses the IE border-box model. How very odd.

EDIT 3: Ok, that last one appears to be a bug in FF3. IE8 and Safari4 limit the max-width to 100% + padding + border which is what the spec says to do. Finally, IE got something right.

EDIT 4: Oh my god, this is awesome! In the process of playing with this, and with much help from the venerable gurus Dean Edwards and Erik Arvidsson, I managed to piece together 3 seperate 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 IE.

+1  A: 

your best bet is to wrap the input in a div with your border, margins, etc, and have the input inside with width 100% and no border, no margins, etc. e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title>width:auto</title>

<style>
div {
 border: 1px solid red;
 padding: 5px;
}
input, form {
 display: block;
 width: 100%;
}
</style>
</head>

<body>

    <form>
     <div><input type="text" name="foo" /></div>
    </form>
</body>
</html>
Jonathan Fingland  2009-06-23 05:52:27
Yeah, it'll work but that's more of a workaround than an answer. i'm trying to establish why input seems to ignore the block behaviour.
SpliFF  2009-06-23 05:57:23
+1  A: 

The reason this happens is that a text input's size is determined by its size attribute. add size="50" inside the <input> tag. Then change it to size="100" -- see what I mean?

I suspect there's a better solution, but the only one that comes to mind is something I found on the "Hidden features of HTML" question on SO: Use a content-editable div, instead of an input. Passing the user input to the enclosing form (if that's what you need to) might be a little tricky.

http://stackoverflow.com/questions/954327/hidden-features-of-html/954904#954904

MatrixFrog  2009-06-23 06:00:27
I'm curious to know how the CSS people justify this. If width can override size explictly with pixels/percentage I don't see why it should continue to honor it when the element is a block.
SpliFF  2009-06-23 06:27:35
+1  A: 

You could fake it, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <title>width:auto</title>

        <style>
        div, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>
Jacob  2009-06-23 06:00:32
I've done the fake approach in the past but to be honest I'm getting sick of it. I end up with all sorts of retarded hacks like using 99% width to get inputs and selects to match. I really want a way to treat an input like a div and I was hoping I'd just overlooked something.
SpliFF  2009-06-23 06:05:42
also your input will overflow inputWrapper because it still has width:100% with an internal padding.
SpliFF  2009-06-23 06:29:30
+1  A: 

Also You could fake it, like this:

width:auto

<style>


.container {
    width:90%;
}

.container div{
    border: 1px solid red;
    padding: 5px;
    font-size:12px;
    width:100%;
}

input{
    width:100%;
    border: 1px solid red;
    font-size:12px;
    padding: 5px;

}



form {

    margin:0px;
    padding:0px;
}

</style>
</head>

<body>

    <div class="container">
        <div>
            asdasd
        </div>
        <form action="">
            <input type="text" name="foo" />
        </form>
    </div>
</body>
</html>
Alexander Corotchi  2009-06-23 06:06:06
same probablem as above, you have an internal padding on a 100% width. That will overflow.
SpliFF  2009-06-23 06:31:05
you can do this with javascript
Alexander Corotchi  2009-06-23 06:57:09
A: 

Exact duplicate of

http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers

SleepyCod  2009-06-23 06:08:18
perhaps, but as I said, a workaround is not an explanation.
SpliFF  2009-06-23 06:13:34
+1  A: 

Try this:

form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
Mike  2009-06-23 08:48:38
you left out out the input padding and border. I was about to say you're wrong until I realised what you're doing. Now I get what merkuro was trying to do (his code is still wrong, but the concept was almost there). The padding-right changes the meaning of 100% by 12px (border plus padding of input). The drawback of this approach though is that all other children of form are affected by the padding too and need to compensate as well.
SpliFF  2009-06-23 14:04:45
+6  A: 

Check out what I came up with, a solution using the relatively unknown box-sizing:border-box style from CSS3. This allows a 'true' 100% width on any element regardless of that elements' padding and/or borders.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <title>Cross-browser CSS box-sizing:border-box</title>

    <style type="text/css">
    form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
    div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

    /* The voodoo starts here */
    .bb {
     box-sizing: border-box; /* css3 rec */
     -moz-box-sizing: border-box; /* ff2 */
     -ms-box-sizing: border-box; /* ie8 */
     -webkit-box-sizing: border-box; /* safari3 */
     -khtml-box-sizing: border-box; /* konqueror */
    }
    </style>

    <!-- The voodoo gets scary. Force IE6 and IE7 to support IE5's box model -->
    <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
</head>

<body>
  <form name="foo" action="#">
    <div class="bb">div</div>
    <input class="bb" size="20" name="bar" value="field">
  </form>
</body>
</html>

This solution supports IE6 and IE7 via a behaviour written by Erik Arvidsson with some tweaks from Dean Edwards to support percentage and other non-pixel widths.

Working example
Behaviour (boxsizing.htc)

SpliFF  2009-06-23 16:36:13
I would upvote this answer 1000 times if I could.
Bryan Downing  2010-03-06 02:12:18
You, sir, are a genius.
GeReV  2010-07-12 16:13:47

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?