Search code examples
htmlcssinput-field

Align text input and submit input horizontally, text input filling up all empty space

I have a submit button, with 30px width, to the right of a text input field.

The text input field should dynamically fill up all available space.

What's the styling to accomplish this?

<div class="wrapper">
  <input type="text">
  <input type="submit">
</div>
Solution

  • The box-sizing is there because the submit button has a border and padding on it by browser default so it's adding to my 30px declaration. You can remove it if you add the padding-left padding-right and border-left and border-right together and minus it from the width. calc() is IE9+, but shouldn't be a problem these days. Very useful for these sorts of things.

    * {
  box-sizing: border-box;
}

.wrapper {
  width: 500px
}

input[type="text"] {
  width: calc(100% - 30px)
}

input[type="submit"] {
  width: 30px;
  float: right;
}