CSS: hacer que los divs se alineen horizontalmente

Tengo un contenedor div con un fijo widthy height, con overflow: hidden.

Quiero una fila horizontal de flotador: divs izquierdos dentro de este contenedor. Los Divs que flotan a la izquierda empujarán naturalmente a la 'línea' a continuación después de leer el límite derecho de su padre. Esto sucederá incluso si heightlos padres no lo permiten. Así es como se ve esto:

! [Incorrecto] [1]: se eliminó la imagen de la choza que había sido reemplazada por un anuncio

Cómo me gustaría que se viera:

! [Derecha] [2]: imagen eliminada de la choza que había sido reemplazada por un anuncio

Nota: el efecto que quiero se puede lograr usando elementos en línea & white-space: no-wrap(así es como lo hice en la imagen que se muestra). Sin embargo, esto no es bueno para mí (por razones demasiado extensas para explicarlas aquí), ya que los divs secundarios deben ser elementos flotantes a nivel de bloque.

Puede colocar un div interno en el contenedor que sea lo suficientemente ancho para contener todos los divs flotantes.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

style="overflow:hidden"para los padres divy style="float: left"para todos los niños divses importante hacer la divsalineación horizontal para los navegadores antiguos como IE7 y siguientes.

Para los navegadores modernos, puede usar style="display: table-cell"para todo el niño divsy se renderizaría horizontalmente correctamente.

Esto parece cercano a lo que quieres:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

puedes usar la clippropiedad:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

tenga en cuenta los position: absolutey overflow: hiddennecesarios para empezar clipa trabajar.

Float: left, display: inline-block ambos fallarán al alinear los elementos horizontalmente si exceden el ancho del contenedor.

Es importante tener en cuenta que el contenedor no debe envolverse si los elementos DEBEN mostrarse horizontalmente: white-space: nowrap

Ahora puede usar css flexbox para alinear divs horizontal y verticalmente si es necesario. la fórmula general es la siguiente

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

Flotar a la izquierda. En Chrome, al menos, no es necesario tener un contenedor id="container", en el ejemplo de LucaM.

Puedes hacer algo como esto:

#container {
  background-color: red;
  width: 200px;
}

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>