How do I tell my HTML that two elements should occupy the rest of the remaining width available?

Question

I have three input fields and a search graphic in a larger DIV

<div style="vertical-text-align:center;">
<form id="search-form" action="//search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:25%; min-width: 100px;">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:25%; min-width: 100px;">
    <input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width: 40%; min-width:100px;">
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
</form> </div>

I would like the third search field and the magnifying glass icon to occupy the remaining width because when I try and specify a width as I do in this Fiddle — https://jsfiddle.net/stndbt2u/2/ , the magnifying glass graphic wraps to the next line even if there is enough room to display everything. How do I always keep the magnifying glass and third search field on the same line and make them occupy the rest of the available width?

Note that if there is less than 580pixels (the max-width of the parent container), its fine, and preferable, if the third search field and magnifying glass wrap to the next line.

Answer 1

If you're willing to settle for a CSS-only solution and sacrifice some degree of incompatibility with older browsers, the CSS flexbox solution is your best bet. Basically, we will set up two scenarios:

A: When the viewport is larger than 620px

Calculations: 580px of the max-width of the login form, and 20px each of the left and right paddings

We allow #first_name and #last_name to have the width of 20%, allow #event to grow to fill remaining space, and for the .search_button to have a fixed dimension of 40 by 40px.

This means that the following rule will work:

#search-form {
  display: flex;  /* Enable flexbox */
  flex: 1 0 auto; /* Breakdown:
                     flex-grow: 1 (allow elements to grow)
                     flex-shrink: 0 (prevent elements from collapsing)
                     flex-basis: auto (allow width to determine element dimensions)
                  */
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

B: When the viewport is smaller than 620px

Same calculations as above.

Flexbox does not wrap elements by default and tries to fit them on a single line. We do not want this behaviour in the narrow viewport scenario, since you requested the form be broken into multiple lines. Therefore, using flex-wrap: wrap will force wrapping (line-breaking in a sense).

We still want #first_name and #last_name to occupy full width. We can simply use width: 50% so that they will add up to 100%. Since wrapping is enabled, make sure that their sum do not exceed 100%—if you are adding borders (without using box-sizing: border-box; on the input elements) and/or margins, you will need to use width: calc(50% - x) to ensure that these extra spaces are taken care of.

On the second row, we have #events and .search_button. We still want to keep .search_button at 40px wide, but want #events to expand to fill all the space on the second row. This can be done by declaring width: calc(100% - 40px) on #events.

Remember to wrap all these in a @media query with a max-width set to 620px:

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }

  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}

---

For a proof-of-concept fiddle, see this link: https://jsfiddle.net/teddyrised/382fhxpc/. Note that I have removed display: table and other inline CSS styles. Let's try to avoid using inline CSS if ever possible.

I have also embedded an example as a code snippet:

body {
  background-color:grey;
}

#logo {
  margin: 0 auto;
  padding: 10px;
}

#searchForm {
  padding: 20px;
}

#search-form {
  display: flex;
  flex: 1 0 auto;
}

#first_name, #last_name { width: 20%; }
#event { } /* Do not specify width to allow it to grow freely */
.search_button { width: 40px; height: 40px; } /* Predefine image dimensions to ensure proper aspect ratio */

#loginLogos {
  margin: 0 auto;
  padding: 20px;
}

#loginArea {
  border-radius: 25px;
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}

@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }
  
  #first_name, #last_name { width: 50%; }
  #event { width: calc(100% - 40px); }
}
.searchField {
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results
    <br />
    <div>
      <form id="search-form" action="/events/search" accept-charset="UTF-8" method="get">
        <input name="utf8" type="hidden" value="✓">
        <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
        <input type="text" name="event" id="event" placeholder="Event" class="searchField">
        <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
      </form>
    </div>
  </div>
</div>

Answer 2

Solution: https://jsfiddle.net/stndbt2u/5/

Simply add float: left to the inputs, and a max-width for the image of 10% (as you already have 25+25+40). If you want the third input and the image going to the next line when the form width is not enough, add clear: left to that third input on a media query.

This is the code:

#search-form input{
  float:left;
}
input.search_button {
  max-width:10%;
}
@media (max-width: 580px) {
  input#event {
    clear:left;
  }
}

Answer 3

You need set wrapp all inputs in one wrapper(with relative position) and set width for them in percent and make absolute position for glass. look:

body{
  background:#ccc;
}
.parent-wrapper{
  float:left;
  width:100%;
  text-align:center;
}
#searchForm, #searchForm *{
  box-sizing: border-box;
  outline:none;
}
#searchForm{
  border-radius:5px;
  background:#FFF;
  padding:20px;
  box-sizing:border-box;
  max-width:580px;
  display:inline-block;
}
#searchForm form{
  width:100%;
  position:relative;
}
#searchForm .input{
 padding:0 5px;
  float:left;
  width:25%;
}
#searchForm .search-wrapper{
  width:50%;
  float:left;
  padding-right:50px;
}
#searchForm .search-wrapper .input{
 width:100%;
}
#searchForm .searchField{
  float:left;
  border-radius:5px;
  border:1px solid #ccc;
  padding:0 10px;
  height:40px;
  width:100%;
}
#searchForm .search_button{
  position:absolute;
  right:0;
}
@media (max-width: 400px) {
 #searchForm .search-wrapper,#searchForm .search-wrapper .input {
    width:100%;
  }
  #searchForm form{
    padding-right:0;
  }
  #searchForm .input {
    width:50%;
  }
  #searchForm .search-wrapper{
    margin-top:10px;
  }
}

<div class="parent-wrapper">
<div id="searchForm">
	Search For Results<br> 
	<form id="search-form" action="/events/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
        <div class="input">
		<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
        </div>
      <div class="input">
		<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
       </div>
       <div class="search-wrapper">
       <div class="input">
		<input type="text" name="event" id="event" placeholder="Event" class="searchField">
        </div>
		<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" height="40" align="middle">
     </div>
      <div style="clear:both;"></div>
</form>
	</div>
  </div>

and wrapp inputs like in bootstraps what using columns and add box-sizing. Better just check and learn styles what I provided.

Answer 4

Examining the page on Fiddle using Chrome's "Inspect" function showed that the parent container (the form tag with id="search_form") has a width of 540 pixels, not 580 pixels.

Also, extra spacing appears to be added between each input text element to add another 6 pixels between these elements.

Adding up the widths of the two name inputs (2 X 135), the event input (216), the magnifying glass icon (40) and the extra spacing between these elements (3 X 6), yields a total of 544 pixels. Since this width is greater than the parent container width, the last element (the magnifying glass icon) is pushed to the next line.

I am suspicious of the display:table-cell CSS used by the class definitions of the input elements. Instead, try using display:inline-block and see if that reduces the spacing between the input elements.

If that does not work, some other width adjustment needs to be done so that the parent container can hold all of these elements on a single line.