1

I have a 100% width container that I would like to fill with 8 inputs of the same size. 100 / 8 = 12.5

The html:

<div id="container">
<input class="form" />
<input class="form" />
....
</div>

My css:

#container{
  width: 100%;
  background-color:red;
  margin:0;
}

.form{
  width:12.5%;
  margin:0;
}

As you can see in this fiddle: https://jsfiddle.net/7z7e63cb/

The last input is displayed in another line. Why? and how can I fix it? Thanks

John Smith
  • 6,105
  • 16
  • 58
  • 109

4 Answers4

7

You need to do two things

  1. Remove white-space from HTML
  2. Use box-sizing: border-box on inputs because of default border and padding

html,
body {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  background-color: red;
  margin: 0;
}
.form {
  width: 12.5%;
  box-sizing: border-box;
  margin: 0;
}
<div id="container">
  <input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" /><!--
  --><input class="form" />
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • 1
    Rather than commenting out the line-break/white-space you could, alternatively, set `font-size: 0;` for the `#container` and `font-size: 1rem;` for the `` elements. – David Thomas Sep 13 '16 at 11:54
  • @DavidThomas: Yep, this seems to be more elegant and flexible solution – jAC Sep 13 '16 at 11:59
  • -`box-sizing` alone wouldn't help in this case, since it doesn't take into account the inter-word whitespaces.- _read these numbers as alternatives, not consecutive steps, sorry._ `font-size: 0;` is one of the best CSS options to remove spaces without markup changes, but it still may cause some artifacts in some browsers (e.g. https://codepen.io/stowball/details/LsICH). Removing spaces looks more reliable, but I prefer the Flexbox solution to them all. – Ilya Streltsyn Sep 13 '16 at 12:02
  • It is still not working somehow?: https://jsfiddle.net/7z7e63cb/13/ the updated code – John Smith Sep 13 '16 at 12:03
  • @John Smith Like i said you also need to remove white-space from html https://jsfiddle.net/7z7e63cb/16/ or as other suggested you can use font-size https://jsfiddle.net/7z7e63cb/17/ – Nenad Vracar Sep 13 '16 at 12:04
4

In my opinion, the best way to do this in 2016 is to use Flexbox: see updated fiddle.

The main trick is done with the following lines:

#container{
  ...
  display: flex; /* turns the Flexbox magic on! */
}

.form{
  flex: 1; /* makes the elements equal width, no extra calculation needed */
  min-width: 0; /* allows them to shrink below their default width */
  ...
}


html,
body {
  margin: 0;
  padding: 0;
}
#container {
  width: 100%;
  background-color: red;
  margin: 0;
  display: flex; /* turns the Flexbox magic on! */
}
.form {
  flex: 1; /* makes the elements equal width, no extra calculation needed */
  min-width: 0; /* allows them to shrink below their default width */
}
<div id="container">
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
  <input class="form" />
</div>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
0

Because of white spaces, it is taking few length of the div, and hence your 'forms' does not fit in a line.
You can either
*. Reduce your form width to 11.5% for each. or,
*. Remove the white spaces.

Novice
  • 558
  • 2
  • 9
  • 21
0

There are more factors involved in the content width than just the width of the input field.

I've added border:0; to the .form class, and removed the line break(s) between the inputs in your html.

This will then result in the 100% width you're looking for, as per the updated fiddle:

https://jsfiddle.net/ghcuhwpo/

Chris J
  • 1,441
  • 9
  • 19