Muchos divs alineados

[geq]

Hola, necesito que me den una mano, por favor:

Tengo algo así:

Código:

<div class="items_container">
  <div class="items">
    <div class="item">blabla</div>
    <div class="item">blabla</div>
    <div class="item">blabla</div>
    <div class="item">blabla</div>
     ...
  </div>
</div>

CSS:

Código:

.items_container {
position: relative;
width: 200px;
height: 100px; /*valores de ejemplo*/
overflow: hidden;
}
.items {
position: absolute;
left: 0px;
height:100px;
}
.item {
float: left;
width: 100px;
height: 100px;
}

La idea es que .items se pueda desplazar dentro de .items_container (overflow hidden) para hacer un slide con javascript.
Pero ocurre que cuando hay muchos .item, se van hacia abajo, formando nuevas hileras.

¿Cómo puedo hacer que los .item queden estríctamente uno al lado del otro y que .items tome el ancho correspondiente?

Esto, sin darle width a .items.

Gracias, saludos.

[kseso?]

".item" flotados, ".item" sin medidas (y mejor posicionado relativamente si no hay algún motivo que lo impida) y "overflow:auto".
Y el texto etiquetado (en "p", "span" o cualquier otra) con "display: block" y si es necesario con algún padding o margin.

Un saludo

[Mikmoro]

Veamos.
- ¿Qué tamaño tiene un div (como tu <div class="items">) si no se le asigna ancho?: un 100% de la pantalla.
- ¿Qué ocurre cuando las cajas llenan el 100% del tamaño de su contenedor?: que la siguiente salta de línea (como pasaría con el texto, etc.).

Entonces: ¿se pueden alinear cajas en horizontal, sin indicar tamaño de ancho a su contenedor, y en un número que supere el ancho de la pantalla, sin que salten a la siguiente línea del flujo del documento?: NO. ¿Por qué habrían de hacerlo?

(juraría que no me equivoco, pero bueno, a ver si alguien me demuestra lo contrario, porque hablo de memoria [y de lógica]).

[Mikmoro]

Como podrás ver en este ejemplo, lo que hago es que la caja contenedor no tiene ancho y sí overflow: auto, pero eso es porque tiene dentro otra caja que sí lo tiene, si no, no se puede hacer que crezca en horizontal sin saltar de línea porque sí.

[kseso?]

No. No hay equivocación.
Me quedé sólo con la segunda parte (div's alineados) y de forma incompleta (faltó un display: inline) y alguna cosilla más.

Otro ejemplo para que pueda ver y elegir (y curarse de esa incipiente divitis )

P.D.: hey! Dblers rescatado

[geq]

Vengo probando lo que dicen pero no funciona; de hecho lo que lo limita no es la pantalla, sino el div ".items_container". La idea sería que ".items" se ensanchara más alla de los límites, no sé porqué no sería posible si para eso existen las barras de desplazamiento.

En el último ejemplo de kseso? vi que el div que contiene las imagenes tiene un ancho definido, que es lo que no puedo hacer yo.

Muchas gracias, saludos

[Mikmoro]

Iniciado por geq

de hecho lo que lo limita no es la pantalla, sino el div ".items_container". La idea sería que ".items" se ensanchara más alla de los límites, no sé porqué no sería posible si para eso existen las barras de desplazamiento.

¿En serio has leído las respuestas y explicaciones que te hemos dado?

Iniciado por geq

Vengo probando lo que dicen pero no funciona;

Discúlpame pero ¡¡¡cómo aborrezco estas afirmaciones!!! gratuitas. ¿Los ejemplos que hemos puesto no funcionan? ¿sabes si los has aplicado correctamente?

En fin, los siento, no puedo ayudarte.
Saludos.

[kseso?]

Iniciado por Mikmoro

¿En serio has leído las respuestas y explicaciones que te hemos dado?

Iniciado por geq

Vengo probando lo que dicen pero no funciona...

Discúlpame pero ¡¡¡cómo aborrezco estas afirmaciones!!! gratuitas. ¿Los ejemplos que hemos puesto no funcionan? ¿sabes si los has aplicado correctamente?

En fin, los siento, no puedo ayudarte.
Saludos.

+
Por mi parte sólo añadir que tienes dos opciones: o adaptarlo a lo que necesites (y no se qué es y cómo) o esperar que venga otro usuario y te lo de hecho.