Style input element to fill remaining width of its container

by

Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating

It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.

Then you can float the button to the right and the input field fills the remaining space.

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}
<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

A simple fiddle: http://jsfiddle.net/v7YTT/90/

Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.

Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. How do I vertically center text with CSS? [duplicate]
  3. Fill the remaining height or width in a flex container
  4. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  5. Why are my CSS3 media queries not working on mobile devices?
  6. How does the “position: sticky;” property work?
  7. A Space between Inline-Block List Items [duplicate]
  8. CSS vertical alignment of inline/inline-block elements
  9. How to remove the space between inline/inline-block elements?
  10. Colspan/Rowspan for elements whose display is set to table-cell
  11. How do I install a custom font on an HTML site
  12. What’s a 3D doing in this HTML?
  13. Circular percent progress bar
  14. document.body.scrollTop is always 0 in IE even when scrolling
  15. How to create a curve between two gradient using CSS?
  16. How can I fill a div with an image while keeping it proportional?
  17. How do I make the whole area of a list item in my navigation bar, clickable as a link?
  18. Is it considered bad practice to use absolute positioning? [closed]
  19. How to create a transparent triangle with border using CSS?
  20. 5 items per row, auto-resize items in flexbox
  21. Image label for input in a form not clickable in IE11
  22. Default :target with CSS
  23. How to center a (background) image within a div?
  24. Changing the highlight color when selecting text in an HTML text input
  25. Why do my list item bullets overlap floating elements
  26. How to add a background image on top of a previous background image?
  27. Css hover sometimes doesn’t work on svg paths
  28. Unwanted border-radius corners around images in Brave/Chrome browser
  29. Bootstrap 3 – show collapsed navigation for all screen sizes
  30. How can I prefix ordered list item numbers with a static string using CSS?

Leave a Comment