How to line up HTML input elements?

Asked 7/10, 2008 at 22:6 Answered 13/6, 2012 at 9:22

I am hoping to find a resource for lining up input elements in a HTML page. I find it difficult to get a select element and a text box to be the same width even when using the width style attribute, and it is even more difficult across browsers. Finally, file inputs seem impossible to get to the same width cross browser. Are there any good guides or tips for accomplishing this? Perhaps there are some default CSS attributes I should be setting.

Go answered 7/10, 2008 at 22:6 Comment(2)

@Jeremy while it can be argued that html & css are not strictly 'programming' but it is certainly something that is pretty damn close. It is also something that I would guess a hefty number of the people on this site do as a daily part of their job. – Infancy 17/10, 2009 at 18:7

This problem seems to happen when rendering in standards mode, remove the doctype tag and see the difference. Check this question that solved the problem for me: #5627610 – Barrelhouse 29/8, 2011 at 21:19

I tested this out in Internet Explorer 7, Firefox 3 and Safari/Google Chrome. I definitely see the problem with <select> and <input type="file">. My findings showed that if you styled all the inputs at the same width, the <select> would be about 5 pixels shorter in all browsers.

Using the Eric Meyer CSS reset script does not help this issue, however if you simply make your <select> inputs 5 pixels wider you'll get very good (albeit not perfect) alignment in the major browsers. The only one that differs is Safari/Google Chrome, and it appears to be 1 or 2 pixels wider than all the other browsers.

As far as the <input type="file"> is concerned, you don't have much flexibility with styling there. If JavaScript is an option for you, you can implement the method shown on quirksmode to achieve greater control over the styling of the file upload control.

See my full working example below in XHTML 1.0 Strict for a typical form with consistent input widths. Note that this does not use the 100% width trick pointed out by others here because it has the same problem with inconsistent widths. Additionally there are no tables used to render the form as tables should only be used for tabular data and not layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Example Form</title>
  <style type="text/css">
    label,
    input,
    select,
    textarea {
      display: block;
      width: 200px;
      float: left;
      margin-bottom: 1em;
    }
    
    select {
      width: 205px;
    }
    
    label {
      text-align: right;
      width: 100px;
      padding-right: 2em;
    }
    
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="java">Java</option>
        <option value="ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>

</html>

Hystero answered 8/10, 2008 at 6:16 Comment(2)

I think that the inconsistency is down to inherent styling on the elements, text boxes have inner padding which is different to there input types, so you essentially have to factor this in, either by resetting all the styling at the start of your css or adding/subtracting 5px from the other elements. As far as cross browser consistence goes, good luck with that, very common complaint, which is down to the programmers of the browsers, nothing much to be done, aside from boycott all but one browser :D (I vote go firefox) – Skellum 17/11, 2009 at 16:38

I found just about every major browser on Windows would render a select element 8px narrower than a text input or textarea. So I styled accordingly, e.g. input, textarea { width: 180px; } select { width: 188px; } – Celin 17/11, 2009 at 17:2

I usually put them inside a div or table cell (horrors! I know) of the width I want, then set the select and input style:width to 100% so they fill the div / cell they are in.

Shimmery answered 7/10, 2008 at 22:9 Comment(2)

I thought this was an obvious solution. – Aparejo 2/5, 2009 at 16:8

Doesn't work when the input overflows its <td> bounds into the next cell. – Courtmartial 20/6, 2012 at 18:15

I found that if you set select and input element border and padding to 0, they are same width. (Tested on Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Putting 1px border/padding on select and input elements makes input element 2 pixels wider. For example:

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}

Sandfly answered 22/10, 2011 at 18:1 Comment(0)

Other than width, I'd be setting border and margin too, these may or may not influence your controls. Something like this may help:

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron has a good idea too.

Myrna answered 7/10, 2008 at 22:11 Comment(2)

Do you mean "input, select {" by any chance? Otherwise you're targeting a select that's a child of input :) – Celin 17/11, 2009 at 16:54

Of course, my bad. Though, the results of that would look interesting. – Myrna 17/11, 2009 at 20:44

Do you start your CSS files with some base settings? It may be useful to turn padding and margin off on all elements. I haven't tested to see if this could be affecting select / input elements.

Here's an example CSS Reset from Eric Meyer:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Basically answered 7/10, 2008 at 22:11 Comment(0)

File inputs can be fundamentally different across browsers and definitely don't allow much in the way of customization, which can be annoying, but I also understand why that is from a security perspective. For example, try changing the text of the "browse" button that appears on most browsers, or compare the file input on Safari to other browsers...

Bundestag answered 7/10, 2008 at 23:52 Comment(0)

I don't think Ron's idea works...

test case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

This results in the input being some px wider than the select (this is probably OS-dependent). I'm not sure if this could be achieved, even with the +5px trick as the styling of the select seems to be OS (at least windows theme) dependent.

Eximious answered 17/11, 2009 at 16:33 Comment(0)

If you desperately need { width: 100%; } and not specified with widths in pixels, then jQuery is your friend:

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 pixels works best for me (FF9), edit as you see fit.

Shellashellac answered 2/2, 2012 at 13:9 Comment(0)

This is because with an <input>, the border and padding is added on to the width (like with most other elements). With a <select>, the border and padding is included in the width, just like in the old IE quirks mode.

You can get round this by increasing the width to take account of this:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Or (if you can rely on browser support) you can use the new CSS3 box-sizing property to make them behave consistently, and draw padding and border outside of the element width:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Alternatively, you can set box-sizing to border-box to make the inputs behave like the selects, with padding drawn inside the width of the box.

Tested in Chrome, IE8, FF

Ellipticity answered 13/6, 2012 at 9:22 Comment(0)

Recommended topics

Hot tags