como lograr que las imagenes se vean una al lado de otra dentro de un div

[intiweb]

hola mi problema es el siguiente.
tengo un clase css que se llaba box y lo que hace es mostrar un sierto pedazo del contenido de un div y agregarle automaticamente un scroll bar para ver todo el contenido que hay en el div.
la clase es la siguiente

Código CSS:

.box {
    border-width:5px;
    border-color:#CCC;
    border-bottom-style:outset;
    border-left-style:outset;
    border-right-style:outset;
    border-top-style:outset;
    width: 703px;
    height: 495px;
    overflow:auto;
}
 

bueno dentro del div al que le asigne esta clase recupero fotos de la base de datos y las muestro.
yo pongo el codigo del div de esta menera:

Código HTML:

<div id="box" class="box">
 
<img height='477' src='fotos/".$album."/".$nombre."'></a>
<img height='477' src='fotos/".$album."/".$nombre."'></a>
<img height='477' src='fotos/".$album."/".$nombre."'></a>
 
</div>
 

el tema es que las fotos normalmente se deverian ver una al lado de otra y el scrollbar ser orizontal, pero no se porque me aparecen una foto abajo de otra y el scrollbar vertical.

alguien sabe como lograr en el estilo css que se vean horizontales las fotos y no una arriva de otra ??

desde ya muchas gacias y espero que alguien sepa como hacerlo XD !!

[GAST0N]

habria q verificar el ancho de las imagenes, ya que si supera el ancho del div contenedor, (.box width: 703px;) se veran como una "lista"... fijate que medidas tienen..

[intiweb]

si son un poco mas chicas pero entran una sola porque con la segunda ya supera el ancho.
y si el problema es ese mismo, pero no hay ningun atributo css que lo oblige a seguir para el costado y no en fila ??

[GAST0N]

Iniciado por intiweb

si son un poco mas chicas pero entran una sola porque con la segunda ya supera el ancho.
y si el problema es ese mismo, pero no hay ningun atributo css que lo oblige a seguir para el costado y no en fila ??

no seria mas sencillo que le des un width:auto al div contenedor?? de esa manera se adaptaria ....

las imagenes varian mucho de tamaño o son siempre del mismo??

[intiweb]

pasa que la idea es que sea vea una tira de fotos en el centro de la pantalla en un cuadrado. y que la pases con el scroll .
si le saco el width fijo va a ser enorme se me va todo el diseño por la borda jaja.
lo puedo hacer con un iframe pero quiero evitar eso porque tiene un borde que se lo meto al div y no tengo ganas de luchar con el iframe y como queda posicionado jaja

[GAST0N]

Iniciado por intiweb

pasa que la idea es que sea vea una tira de fotos en el centro de la pantalla en un cuadrado. y que la pases con el scroll .
si le saco el width fijo va a ser enorme se me va todo el diseño por la borda jaja.
lo puedo hacer con un iframe pero quiero evitar eso porque tiene un borde que se lo meto al div y no tengo ganas de luchar con el iframe y como queda posicionado jaja

le das float left a las imagenes .. y q el ancho del content sea un promedio de lo q calzarian 2 fotos, pero q no sea menos porq te va a pasar siempre eso .. es la unica manera...

UNA PREGUNTA .. VOS QUERES Q EL SCROLL SEA VERTICAL U HORIZONTAL ??

[intiweb]

el scroll quiero que sea horizontal, probe con float left pero no anda, y no le puedo modificar el tamaño al divy las fotos son cargadas por el usuario no se de que ancho son :S.

[vgonga1986]

Buenas, ahora haré un par de pruebas a ver si consigo lo que quieres, pero te aviso que esta línea HTML no está muy bien:

<img height='477' src='fotos/".$album."/".$nombre."'></a>

te falta el cierre de img y tienes un link sin abrir, supongo que de algún remanente que tengas por ahí. Lo del link será de copiar y pegar aquí, pero la imagen añádele el cierre (<img ... />), que si no, no te validará.

Un saludo.

[intiweb]

si esos errores los cambie al toque que publique XD ...
pero no es por eso que no anda. porque ahora esta con el cierre de la imagen y todo como debe ser pero no anda.
intente usando float, y tambien intente usando una clase css con display:inline-blok; pero tampoco me sirvio :(,
no se que mas hacer...

[vgonga1986]

Buenas, perdona la tardanza.

Creo que lo que comentas no se puede hacer por donde vas. Me da que la única solución es con position: absolute; Es que precisamente la idea de float es que el contenido ocupe el sitio disponible, si no hay sitio, tenderá a bajarte la imagen hacia la siguiente fila. La pega de position:absolute es que tienes que poner la posición con left y top a mano, luego tienes que conocer los anchos de las imágenes. Lo que puedes hacer es, como has hecho con el alto, pero con el ancho. Es decir, dejar que las imágenes se redimensiones fijando únicamente el ancho y que, si se pasan de alto, se aumente el div.

No se me ocurre otra forma de hacerlo, lo siento. Espero que te sirva.

[intiweb]

no no puedo hacer eso porque el tamaño es el que fue diseñado y la idea es seguir el derecho, lo que pasa cuando programas algo que es diseñado por un diseñador grafico ajajajaj XD !!
pero lo voy a hacer con un iframe entonces y listo... muchas gracias por la ayuda.

[Carlangueitor]

A ver si esto es lo que buscas, no creo que un iframe sea la única opción:

Código HTML:

<div id="boxcontainer">
    <div id="box">
        <img src="imagen1.jpg" alt="imagen1" />
        <img src="imagen1.jpg" alt="imagen1" />
        <img src="imagen1.jpg" alt="imagen1" />
        <img src="imagen1.jpg" alt="imagen1" />
        <img src="imagen1.jpg" alt="imagen1" />
        <img src="imagen1.jpg" alt="imagen1" />
        <img src="imagen1.jpg" alt="imagen1" />
    </div>
</div>
 

Código CSS:

#boxcontainer {
    border: 5px outset #CCC;
    width: 703px;
    height: 495px;
    overflow:auto;
}
#box{
    height: 495px;
}
#box img{
    height: 477px;
    float: left;
}
 

Saludos