How do I make a DIV only take up horizontal space its elements take up?

Question

Ideally I would like this to work for Mac Chrome and Firefox. How do I style a DIV such that it takes up horizontal space equal to the width of its elements but not more? Right now I have

<div id="searchContainer">
Enter Search Criteria To Lookup Results:<br>
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">

<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item" size="50">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form></div>
</div>

and the styles are

#searchContainer
{
        padding: 10px;
        font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
        background-color: tan;
}

#search_form
{
    display:table-cell;
    padding: 0px;
}

#search_form form input
{
    vertical-align:middle;
}

This is illustrated in the JSFiddle here — https://jsfiddle.net/jzz6y71t/1/ . Notice that the DIV takes up the entire horizontal space of the parent container but I’d like it to only be as long as what the width of the elements are.

Generally, if the content breaks to a second line **this is not possible** (without JS). That's not the way the line-box model works. — Paulie_D, Jun 09 '16 at 21:13
Related - http://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Paulie_D, Jun 09 '16 at 21:14
I am fine to use Javascript if that solves the problem. What JS would I need? — , Jun 09 '16 at 21:25

score 0 · Accepted Answer · answered Jun 09 '16 at 21:27

You can simplify your HTML somewhat as shown below.

On the parent container, use display: table and this will give you a block element with a shrink-to-fit width (width: auto).

You can use some other tag for the tile, for example, h1.

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  display: table;
}
#searchContainer h1 {
  margin: 5px 0;
  font-size: 1.0em;
}
#search_form {
  display: table-cell;
  padding: 0px;
}
#search_form form input {
  vertical-align: middle;
}

<div id="searchContainer">
  <h1>Enter Search Criteria To Lookup Results:</h1>
  <form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name">
    <input type="text" name="item" id="item" placeholder="Item" size="50">
    <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
  </form>
</div>

How do I make a DIV only take up horizontal space its elements take up?

1 Answers1