How do I make an input element occupy all remaining horizontal space?

by

See: http://jsfiddle.net/thirtydot/rQ3xG/466/

This works in IE7+ and all modern browsers.

.formLine {
    overflow: hidden;
    background: #ccc;
}
.formLine input {
    width: 100%;
}
.formLine label {
    float: left;
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
.formLine button {
    float: right;
}
.formLine input, .formLine button {
    box-sizing: border-box;
}
<div class="formLine">
    <button>click me</button>
    <label>some text.. </label>
    <span><input type="text" /></span>
</div>

The button must go first in the HTML. Slightly distasteful, but c’est la vie.

The key step is using overflow: hidden;: why this is necessary is explained at:

The extra span around input is necessary because display:block; has no effect for input: What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. Bold tag breaking the divs?
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. Center image horizontally within a div
  5. How to change the height of a ?
  6. css ellipsis on second line
  7. How can you customize the numbers in an ordered list?
  8. Is it bad to use !important in a CSS property?
  9. Style input element to fill remaining width of its container
  10. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  11. Can a span be closed using ?
  12. Stop CSS transition from firing on page load
  13. Get input type=text to look like type=password
  14. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  15. How to display text, a dotted line then more text spanning the width of the page?
  16. How can I apply a border only inside a table?
  17. What does the clearfix class do in css? [duplicate]
  18. Center image in div horizontally [duplicate]
  19. Add spacing between vertically stacked columns in Bootstrap 4
  20. HTML — Two Tables Horizontally Side by Side
  21. Draw double curved item with beveled edges
  22. How to center an unordered list?
  23. a href link for entire div in HTML/CSS
  24. Center a large image of unknown size inside a smaller div with overflow hidden
  25. How to change border color of textarea on :focus
  26. Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
  27. Is there any way to add padding to select options via CSS?
  28. CSS Selector for No-Children-But-Not-Empty
  29. How to center and crop an image to always appear in square shape with CSS?
  30. Table vertical header?

Leave a Comment