Keep Ivs side by side even if the line runs out

Question

I’m having a hard time putting one div next to another, use float:left but when the line ends div goes to the next line, I’d like it even if it didn’t fit on the screen to div remain on the same line with scroll lateral..

Answer 1

Justification

Well, considering that no answer above used the way to solve this problem that I use, I am here providing my way in search to improve the content of the question.

Code

.pai {
  
  /* Atributo(s) necessários para o funcionamento completo. */
  overflow-x: scroll;
  white-space: nowrap;
  
  /* Atributo(s) apenas para facilitar a visualização "fru-fru". */
  overflow-y: hidden;
  width: 100%;
  max-height: 50px;
}

div {
  /* Atributo(s) necessários para o funcionamento completo. */
  display: inline-block;
  
  /* Atributo(s) apenas para facilitar a visualização "fru-fru". */
  width: 100px;
  background-color: deepskyblue;
  margin: 2px;
  border: 1px solid #ddd;
  padding: 3px;
  color: #fff;
}

<div class=pai>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
  <div>Foo</div>
</div>

Completion

The most important part is inline-block in the children and the white-space: nowrap in the parent, because this way css interprets that Divs should be displayed online and the parent should not break lines.

Answer 2

You can use the overflow-x: auto to the div father and float: left to the divs daughters, still, you will need one more div auxiliary:

.div-pai
{
    width: 300px;
    overflow-x: auto; // isso faz com que o scroll apareça apenas quando o espaço for maior do que cabe na div
}

.div-pai>div {
    width: 600em; // para aumentar o tamanho da div auxiliar
}

.div-filha
{
    float:left;
    padding:40px;
}

<div class="div-pai" style="background-color:red;">
    <div>
        <div class="div-filha" style="background-color:green;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet euismod posuere. Nullam vestibulum commodo neque, eu aliquet urna lobortis ultrices. Nunc eget neque viverra, efficitur nisl eget, placerat risus. Cras lorem erat, pretium a gravida vitae, maximus rutrum lorem. Duis et venenatis lectus, nec placerat tortor. Pellentesque sagittis dolor eget dignissim viverra. Donec enim risus, interdum vel mollis in, bibendum scelerisque urna.
    </div>
    <div class="div-filha" style="background-color:blue;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet euismod posuere. Nullam vestibulum commodo neque, eu aliquet urna lobortis ultrices. Nunc eget neque viverra, efficitur nisl eget, placerat risus. Cras lorem erat, pretium a gravida vitae, maximus rutrum lorem. Duis et venenatis lectus, nec placerat tortor. Pellentesque sagittis dolor eget dignissim viverra. Donec enim risus, interdum vel mollis in, bibendum scelerisque urna.
    </div>
    <div class="div-filha" style="background-color:yellow;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus       liquet euismod posuere. Nullam vestibulum commodo neque, eu aliquet urna lobortis ultrices. Nunc eget neque viverra, efficitur nisl eget, placerat risus. Cras lorem erat, pretium a gravida vitae, maximus rutrum lorem. Duis et venenatis lectus, nec placerat tortor. Pellentesque sagittis dolor eget dignissim viverra. Donec enim risus, interdum vel mollis in, bibendum scelerisque urna.
    </div>
</div>
</div>

Example in Jsfiddle

I hope I helped the/

Answer 3

Here’s a way of doing that. The trick is to have three levels, the middle one being, div_3 in this case, it must be longer (width) that its parent element div_1 this has to stay with overflow-x: scroll or auto

.div_1
{
  height: 350px;
  width: 100%;
  margin: auto;
  overflow-y: hidden;
  overflow-x: auto;
}

.div_3
{
  height: 350px;
  width: 150%;
}

.div_2
{
  height: 100px;
  width: 120px;
  float: left;
}
.div_2:nth-child(even) {
  background-color:red;
}
.div_2:nth-child(odd) {
  background-color:blue;
}

<div class="div_1">
  <div class="div_3">
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
    <div class="div_2"></div>
  </div>
</div>

Answer 4

div {
  display: inline-block;
  width: 24%;
  height: 150px;
}

.a {
  background: red;
}

.b {
  background: yellow;
}

.c {
  background: green;
}

.d {
  background: blue;
}

body{
  text-align:center;
  margin:0;
  padding:0;
}

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>


<h2>REDIMENSIONA E VEJA O COMPORTAMENTO</h2>

1.Use display:inline-block for all Divs

2.Use percentages when establishing width (Widths). Divide 100% by the number of Divs you want.

If I don’t understand your question... look at this and try to resize:

http://codepen.io/colombe/pen/ezmjXq