2

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.

Community
  • 1
  • 1
Grynszpan
  • 147
  • 7
  • 1
    So frustrating! This is particularly bad when the elements are inside a div and they overlap the right side of the container. – Zachary Yates Aug 26 '10 at 16:22

1 Answers1

1

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • This certainly appears to work, at least in Webkit and FF. It is very annoying that the extra divs have to get thrown in there... To me it defeats the point of truly semantic markup. But I don't see any other way to do it. In short: thanks. – Grynszpan Aug 26 '10 at 16:45
  • Normally, divs (and spans) don't have a semantic value. At least, in SEO terms. Some purists may disagree this, but those purists are in turn usually HTML developers who have a strong tendency to view the HTML source of every webpage they visit. – BalusC Aug 26 '10 at 16:49