Databases
StackOverflow2013
Postsdbo
POCan I stop 100% Width Text Boxes from extending beyond their containers?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan I stop 100% Width Text Boxes from extending beyond their containers?
    text
    copied!<p>Lets say I have a text box that I want to fill a whole line. I would give it a style like this:</p> <pre><code>input.wide {display:block; width: 100%} </code></pre> <p>This causes problems because the width is based on the content of the text box. Text boxes have margin, borders, &amp; padding by default, which makes a 100% width text box larger than its container.</p> <p>For example, here on the right:</p> <p><img src="https://i.stack.imgur.com/IvcQx.png" alt="enter image description here"></p> <p>Is there any way to make a text box fill the width of its container without expanding beyond it?</p> <p>Here is some example HTML to show what I mean:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;title&gt;Untitled Page&lt;/title&gt; &lt;style type="text/css"&gt; #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px} #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;} input.wide {display:block; margin: 0px} input.normal {display:block; float: right} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="outer"&gt; &lt;div id="inner"&gt; &lt;input type="text" class="wide" /&gt; &lt;input type="text" class="normal" /&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>If this is run, you can see by looking at the "normal" text box that the "wide" text box is sticking out beyond the container. The "normal" text box floats to the actual edge of the container. I'm trying to make the "wide" text box fill its container, without expanding beyond edge like the "normal" text box is.</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