Problem with and width</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2008-11-03T18:09:49.447" class="fromnow">Nov 03 '08 at 18:09</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2011-03-31T15:25:47.227" datetime="2011-03-31T15:25:47.227">Mar 31 '11 at 15:25</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 18,663 times"> <span class="fc-light mr2">Viewed</span> 1.9k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="259455" data-ownerid="337" data-score="9"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="259455"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="9">9</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>In the following code, both the INPUT and TEXTAREA elements render wider than they should. How can I limit them to 100% of the usable area within the div?</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style> .mywidth{ width:100%; } </style> </head> <body> <div style="border: 3px solid green; width: 100px;"> <input class="mywidth" ><br /> <textarea class="mywidth"></textarea><br /> <div style="background-color: yellow;" class="mywidth">test</div> </div> </body> </html> </code></pre> <p>Note: If I remove the DOCTYPE, it renders as expected, with the INPUT, TEXTAREA and inner DIV all the same width and not going outside the containing DIV.</p> <p>Update: Not withstanding the default borders on those elements, it still appears to render incorrectly in <strong>IE7</strong>.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2008-11-03T18:35:56.337" class="relativetime">Nov 03 '08 at 18:35</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Larsenal</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 03 '08 at 18:09">asked Nov 03 '08 at 18:09</time> <a href="../../users/337/larsenal" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/337.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Larsenal" /> </a> <div class="s-user-card--info"> <a href="../../users/337/larsenal" class="s-user-card--link">Larsenal</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">49,878</li> <li class="s-award-bling s-award-blinggold" title="43 gold badges">43</li> <li class="s-award-bling s-award-blingsilver" title="152 silver badges">152</li> <li class="s-award-bling s-award-blingbronze" title="220 bronze badges">220</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">6 Answers<span style="display:none;" itemprop="answerCount">6</span></h2> </div> </div> </div> <a name="3309303"></a> <div id="answer-3309303" class="answer " data-answerid="3309303" data-ownerid="399105" data-score="13" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="3309303"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="13">13</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I had this same problem. I used the box-sizing property mentioned here:</p> <p><a href="../../questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-presen#answer-2515439">How can I make a TextArea 100% width without overflowing when padding is present in CSS?</a></p> <p>Here's what it looked like for me:</p> <pre><code><style> .mywidth{ width:100%; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } </style> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:19">edited May 23 '17 at 12:19</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 22 '10 at 13:24">answered Jul 22 '10 at 13:24</time> <a href="../../users/399105/bmaupin" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/399105.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="bmaupin" /> </a> <div class="s-user-card--info"> <a href="../../users/399105/bmaupin" class="s-user-card--link">bmaupin</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">14,427</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="89 silver badges">89</li> <li class="s-award-bling s-award-bling__bronze" title="94 bronze badges">94</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-3309303" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="3309303" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-6227103" class="comment js-comment " data-comment-id="6227103" data-comment-owner-id="305530" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6227103_3309303"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This won't work in IE7 or less, as older browsers don't support box-sizing. Also, you should be sure to include `-ms-box-sizing` and always list the actual CSS3 property (`box-sizing`) last, so once browsers implement the real CSS property it will overwrite their vendor-specific version.</span> – <a href="../../users/305530/russelluresti" title="6,211 reputation" class="comment-user ">RussellUresti</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/259455/problem-with-input-type-text-and-textarea-width#comment6227103_3309303"><span title="2011-03-30T16:42:47.000 License: CC BY-SA 2.5" class="relativetime-clean">Mar 30 '11 at 16:42</span></a></span> </div> </div> </li> <li id="comment-6244621" class="comment js-comment " data-comment-id="6244621" data-comment-owner-id="399105" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6244621_3309303"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@RussellUresti: good call, I've updated my answer based on your comment</span> – <a href="../../users/399105/bmaupin" title="14,427 reputation" class="comment-user ">bmaupin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/259455/problem-with-input-type-text-and-textarea-width#comment6244621_3309303"><span title="2011-03-31T15:27:02.797 License: CC BY-SA 2.5" class="relativetime-clean">Mar 31 '11 at 15:27</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="259481"></a> <div id="answer-259481" class="answer accepted-answer" data-answerid="259481" data-ownerid="28376" data-score="7" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="259481"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="7">7</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Inputs and textareas both have borders by default</p> <pre><code><style> .mywidth{ width:100%; border:0; } </style> </code></pre> <p>will render all the elements within your container.</p> <p><strong>Update</strong></p> <p>IE also has left and right padding on each element and the following css fits all the elements within the container in FF3, FF2, Safari 3, IE6 and IE7.</p> <pre><code><style> .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; } </style> </code></pre> <p>However, don't forget that you will probably need a border, and perhaps the padding too, in order to make the fields appear to users as normal. If you set that border and padding yourself then you will know what the difference is, across browsers, between the width of the container and the width you will need to give to the input/textarea elements.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2008-11-03T19:50:37.620" class="relativetime">Nov 03 '08 at 19:50</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">philnash</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '08 at 18:19">answered Nov 03 '08 at 18:19</time> <a href="../../users/28376/philnash" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/28376.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="philnash" /> </a> <div class="s-user-card--info"> <a href="../../users/28376/philnash" class="s-user-card--link">philnash</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">70,667</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="60 silver badges">60</li> <li class="s-award-bling s-award-bling__bronze" title="88 bronze badges">88</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-259481" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="259481" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-117478" class="comment js-comment " data-comment-id="117478" data-comment-owner-id="337" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment117478_259481"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Have you tried it? Check IE7. It still bites into the green border on the containing div.</span> – <a href="../../users/337/larsenal" title="49,878 reputation" class="comment-user owner">Larsenal</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/259455/problem-with-input-type-text-and-textarea-width#comment117478_259481"><span title="2008-11-03T18:27:45.293 License: CC BY-SA 2.5" class="relativetime-clean">Nov 03 '08 at 18:27</span></a></span> </div> </div> </li> <li id="comment-117606" class="comment js-comment " data-comment-id="117606" data-comment-owner-id="28376" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment117606_259481"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Apologies, I'm on a Mac! I'll see what I can do in IE7.</span> – <a href="../../users/28376/philnash" title="70,667 reputation" class="comment-user ">philnash</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/259455/problem-with-input-type-text-and-textarea-width#comment117606_259481"><span title="2008-11-03T19:42:48.213 License: CC BY-SA 2.5" class="relativetime-clean">Nov 03 '08 at 19:42</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="259499"></a> <div id="answer-259499" class="answer " data-answerid="259499" data-ownerid="30632" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="259499"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>@Phil has the answer, above.</p> <p>Incidentally, using <a class="external-link" href="http://getfirebug.com/" rel="nofollow noreferrer">Firebug</a> does, indeed, show the default borders on the textarea and input elements. So, using Firebug might have helped.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '08 at 18:23">answered Nov 03 '08 at 18:23</time> <a href="../../users/30632/gabe-hollombe" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/30632.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Gabe Hollombe" /> </a> <div class="s-user-card--info"> <a href="../../users/30632/gabe-hollombe" class="s-user-card--link">Gabe Hollombe</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,847</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="39 silver badges">39</li> <li class="s-award-bling s-award-bling__bronze" title="44 bronze badges">44</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-259499" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="259499" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-117486" class="comment js-comment " data-comment-id="117486" data-comment-owner-id="337" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment117486_259499"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It does look fine in FF, but it's still rendering incorrectly in IE7.</span> – <a href="../../users/337/larsenal" title="49,878 reputation" class="comment-user owner">Larsenal</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/259455/problem-with-input-type-text-and-textarea-width#comment117486_259499"><span title="2008-11-03T18:32:36.187 License: CC BY-SA 2.5" class="relativetime-clean">Nov 03 '08 at 18:32</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="1147755"></a> <div id="answer-1147755" class="answer " data-answerid="1147755" data-ownerid="" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1147755"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>xhtml strict code seems to do that with forms. i just make the inputs and textareas stretch at 99% and that seems to work. give that a try.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-carddeleted"> <time class="s-user-card--time" datetime="answered Jul 18 '09 at 15:03">answered Jul 18 '09 at 15:03</time> <div class="s-avatar s-avatar32 s-user-card--avatar"> </div> <div class="s-user-card--info"></div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="259479"></a> <div id="answer-259479" class="answer " data-answerid="259479" data-ownerid="32812" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="259479"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You could try using this DOCTYPE instead</p> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '08 at 18:17">answered Nov 03 '08 at 18:17</time> <a href="../../users/32812/jaime-garcia" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/32812.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jaime Garcia" /> </a> <div class="s-user-card--info"> <a href="../../users/32812/jaime-garcia" class="s-user-card--link">Jaime Garcia</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,744</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="49 silver badges">49</li> <li class="s-award-bling s-award-blingbronze" title="61 bronze badges">61</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-259479" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="259479" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-117469" class="comment js-comment " data-comment-id="117469" data-comment-owner-id="28376" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment117469_259479"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Not having a DOCTYPE will force the browser into quirks mode, using the old, incorrect box model which doesn't coun't the border as part of the width.</span> – <a href="../../users/28376/philnash" title="70,667 reputation" class="comment-user ">philnash</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/259455/problem-with-input-type-text-and-textarea-width#comment117469_259479"><span title="2008-11-03T18:23:01.450 License: CC BY-SA 2.5" class="relativetime-clean">Nov 03 '08 at 18:23</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="259495"></a> <div id="answer-259495" class="answer " data-answerid="259495" data-ownerid="12377" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="259495"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Add "padding-right:3px;" to the div so it reads as:</p> <pre><code><div style="border: 3px solid green;padding-right:3px; width: 100px;"> </code></pre> <p>Because you have added a border to the div that also counts as internal space of the div.</p> <p>The reason it works without the doc declaration is that the browser does not render the page as transitional XHTML but plain old html which has a different rendering method for div's etc.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '08 at 18:23">answered Nov 03 '08 at 18:23</time> <a href="../../users/12377/toby-mills" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/12377.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Toby Mills" /> </a> <div class="s-user-card--info"> <a href="../../users/12377/toby-mills" class="s-user-card--link">Toby Mills</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">996</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="9 silver badges">9</li> <li class="s-award-bling s-award-bling__bronze" title="13 bronze badges">13</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/5145466/border-of-text-input-element-goes-beyond-containing-table" class="question-hyperlink">Border of text input element goes beyond containing table</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">36</div></a> <a href="../../questions/7525675/text-input-with-100-width-inside-a-td-expands-continues-outside-the-td" class="question-hyperlink">Text input with 100% width inside a td expands/continues outside the td</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/13205096/multiple-input-fields-inside-td-width-issue" class="question-hyperlink">Multiple input fields inside td width issue</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>