porque me pone todas las imagenes en linea

[carlos_belisario]

Buenas quice dos filas de imagenes digamos que como una piramide pero de solo dos filas de esta manera

Código HTML:

<div id="superior"> 
        <img src="imagenes/conjunto.jpg"/>  
        <img src="imagenes/vestido.jpg"/>       
</div>
<div id="inferior"> 
        <img src="imagenes/img3.jpg"/>  
        <img src="imagenes/img2.jpg"/>      
        <img src="imagenes/img5.jpg"/>
        <img src="imagenes/img17.jpg"/>
</div>
 

de manera que me quedaran dos fotos arriba y cuatro abajo, para quise hacerlo de esta manera

Código CSS:

#superior img{  
    float:left; 
}
#inferior img{  
    float:left; 
}
#inferior{
    text-align:center;
    display:block;
}
#superior{
    text-align:center;
    display:block;
}
 

segun yo que se que estoy equivocado porque no me da el resultado que deseo queria que cada una de las imagenes me quedaran al lado, pero la superior arriba y la inferior abajo no se si me explique bien cual fue mi error??
gracias de antemano y disculpen la molestia

[sanxuan]

No parece haber ningún error en tu CSS pero hay cosas innecesarias. No necesitas la propiedad float:left para las imágenes. Yo eliminaría esas dos definiciones. Si en el HTML las etiquetas están seguidas aparecerán unidas las imágenes. Si insertas un salto de línea como en tu código aparecerá un pequeño espacio separador.
Las imágenes son por defecto elementos en línea, se consideran igual que el texto y se distribuyen como éste.
Los <div> son por defecto elementos de bloque, por lo que tampoco es necesario utilizar la propiedad display:block.
El único problema que se podría presentar es que tus div superior e inferior no tengan ancho sufiente para mostrar tus imágenes en la misma línea. En ese caso las imágenes saltarían a la línea siguiente, como lo hace el texto cuando no entra en una sóla línea.
La manera de evitar esto es darle un ancho predeterminado a tus div con la propiedad width asegurandose uno de esta manera que las imágenes se muestren siempre una al lado de la otra. Si las imágenes no entran en la ventana del navegador aparecerá la barra de desplazamiento en lugar de descuadrar tu diseño.

[mariomon17]

Dale un width determinado y overflow: auto

[carlos_belisario]

Iniciado por sanxuan

No parece haber ningún error en tu CSS pero hay cosas innecesarias. No necesitas la propiedad float:left para las imágenes. Yo eliminaría esas dos definiciones. Si en el HTML las etiquetas están seguidas aparecerán unidas las imágenes. Si insertas un salto de línea como en tu código aparecerá un pequeño espacio separador.
Las imágenes son por defecto elementos en línea, se consideran igual que el texto y se distribuyen como éste.
Los <div> son por defecto elementos de bloque, por lo que tampoco es necesario utilizar la propiedad display:block.
El único problema que se podría presentar es que tus div superior e inferior no tengan ancho sufiente para mostrar tus imágenes en la misma línea. En ese caso las imágenes saltarían a la línea siguiente, como lo hace el texto cuando no entra en una sóla línea.
La manera de evitar esto es darle un ancho predeterminado a tus div con la propiedad width asegurandose uno de esta manera que las imágenes se muestren siempre una al lado de la otra. Si las imágenes no entran en la ventana del navegador aparecerá la barra de desplazamiento en lugar de descuadrar tu diseño.

coloque en bloque y el float xq cuando coloque las imagenes cuando las carge me las ponia una bajo la otra por eso le di el float, pero cuando le coloque esta propiedad automaticamente me las coloco una al lado de la otra, incluso las inferiores por eso le di el display al div ya que no se porque me las unio, gracias por la ayuda

Iniciado por mariomon17

Dale un width determinado y overflow: auto

Lo voy a provar y te comento saludos y gracias a ambos

[metacortex]

Carlos, sólo elimina el float:left en las imágenes, ya que no es necesario si las muestras inline. Eso solucionará el problema. Desde luego sería bueno que controlaras la anchura de las imágenes para que todo se muestre de forma correcta.

Iniciado por mariomon17

Dale un width determinado y overflow: auto

Te apoyo en lo del width pero no en lo otro, ya que además de mostrar esa horrible barra de desplazamiento, representa cierta molestia para el usuario, quien se ve en la obligación de usar el ratón sólo para ver la mitad de la última imagen. Mejor trabajar en los anchos de éstas.

Iniciado por sanxuan

Los <div> son por defecto elementos de bloque, por lo que tampoco es necesario utilizar la propiedad display:block.

Eso es correcto.

[carlos_belisario]

perfecto me sirvio tu explicación perfectamente solo tenia que colocar las imagenes inline y me funciono, el overflow no lo utilice en este caso ya que no fue necesario, este lo uso mas que todo en div que seran cuerpos y cosas asi, gracias por su ayuda