Home/ Questions/Q 1026815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T12:08:28+00:00

About a year ago, a question was asked on stackoverflow about how to horizontally

  • 0

About a year ago, a question was asked on stackoverflow about how to horizontally align input and textarea elements: input width vs textarea width

I have some HTML + CSS where I am trying to do precisely this, but I find that no matter what combination of CSS reset and precise, pixel-based width definitions I use, I simply can’t get the elements on my page to line up on the right side (left alignment happens automatically). Here’s some simple demonstration code.

<!doctype html>
<html>
  <head>
    <style type="text/css">
      * {margin: 0; padding: 0;} /* primitive reset */
      body {width: 200px; margin-left:auto; margin-right: auto;
            border: 1px solid black;}
      input {border: 1px solid black; width: 200px;}
      div {border: 1px solid black;}
      textarea {border: 1px solid black; width: 200px;
      }
    </style>
  </head>
  <body>
    <input type="text" value="textinput">
    <div>div</div>
    <textarea>textarea</textarea>
  </body>
</html>

If I change the widths on input and textarea, I can get them to line up in, say, chrome. But then they won’t line up in Firefox. And vice-versa. By default, even with the css reset, one element or the other will overlap the containing div on the right side. You can remove the borders I’ve set and use the browsers’ respective DOM inspectors if you want.

I have spent too many hours futzing around with this issue, so I’m wondering if someone on here knows if what I’m trying to do is even possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is indeed frustrating. Your best bet would be removing the borders from the input elements and wrapping them in another fixed-width element with a border, e.g. a <div>.

    <!DOCTYPE html>
<html>
  <head>
    <title>SO question 3577146</title>
    <style>
      * { margin: 0; padding: 0; } /* primitive reset */
      body { width: 200px; margin: 0 auto; border: 1px solid black; }
      div { width: 200px; border: 1px solid black; }
      input { width: 198px; border: 0; }
      textarea { width: 198px; border: 0; }
    </style>
  </head>
  <body>
    <div><input type="text" value="textinput"/></div>
    <div>div</div>
    <div><textarea>textarea</textarea></div>
  </body>
</html>

    Here’s a jsfiddle demo.

    • 0