alinear a la izquierda

[kaninox]

Hola tengo una duda estoy haciendo un tipo panel en donde tengo una capa de 500px x 500px por decir algo y dentro tengo iconos que van a aplicaciones.

la cosa es que no todos ven los mismos iconos y me gustaría que se mostraran como los iconos de windows alineados a cuadricula, me explico

tengo mi caja de 500x500 y que a medida que se vallan mostrando los iconos que cabe 4 iconos por linea vertical cuando se vea el icono 5 este se valla a la posición top segunda linea de forma automática, sera posible hacer esto con css? no se si me explique bien....

saludos

[C2am]

Podrías darles a esos iconos un estilo como esto:
display: block (si es que no lo tienes dentro de una etiqueta de bloque)
float: left (para que se vayan colocando uno al lado del otro, y en caso de que la suma de sus anchos supere los 500px ponerse debajo)

Claro que para que queden bien, todos los iconos deberían tener el mismo alto.

Resumiendo: flota los iconos.

[kaninox]

pues eso es fácil incluso puedo crearme una tabla con justify para ello, el tema es que me gustaría que el primero estuviera a la izquierda el segundo bajo este el tercero bajo el segundo el cuarto bajo el tercero el quinto al lado del primero, en el caso de que el usuario no veo el icono 3 por decir algo el icono 5 pase abajo no se si me explico creo que es un tanto dificil, si no hay solución optare por tu idea.

caso 1
1 - 5
2
3
4

caso 2

1
2
4
5

gracias

[C2am]

Ah, alineados en forma vertical, yo entendí que era horizontal.
Tendría que pensarlo un poco, a ver que se me ocurre.
Aunque supongo que alguien ya tendrá la respuesta.

Saludos

[kaninox]

Pues yo por mas que he tratado no he podido hacer un align="justify" por decir asi de forma vertical, solo es para el horizontal ya sea en capas o tablas, alguien iluminado que lo halla realizado o tenga una idea?

[kseso?]

la cosa es que no todos ven los mismos iconos

Supongo que hay implicada programación.
En base a esa suposición y asumiendo que los iconos los muestras en una lista*:
Programa para que al llegar al 5º icono cierres la lista y para los siguientes cinco se cree una nueva.
Dale la anchura necesaria a las listas y flótalas a la izquierda.

*: sería lo mismo si el etiquetado es otro, aunque por semántica creo que sería lo indicado.

[safe]

Opino igual que kseso? la forma más prudente de hacerlo es abriendo y cerrando listas.

Código:

<ul style="float:left; margin-right:10px; width:100px;">
   <li>ICONO 1</li>
   <li>ICONO 2</li>
   <li>ICONO 3</li>
   <li>ICONO 4</li>
</ul>
<ul style="float:left; width:100px;">
   <li>ICONO 5</li>
</ul>

La otra opción, pero que sirve solo si hablamos de un contenedor con tamaño fijo e iconos con los mismos tamaños o aproximados, es usar clases que asignen posiciones absolutas. Por ejemplo:

Código:

<div id="contenedor">
   <a class="icono i1"><img src...... /></a>
   <a class="icono i2"><img src...... /></a>
   <a class="icono i3"><img src...... /></a>
   <a class="icono i4"><img src...... /></a>
   <a class="icono i5"><img src...... /></a>
   <a class="icono i6"><img src...... /></a>
</div>

<style>
#contenedor { height:500px; position:relative; width:500px; }
#contenedor .icono { height:50px; position:absolute; width:50px; }
#contenedor .icono.i1 { left:0px; top:0px;*}
#contenedor .icono.i2 { left:0px; top:50px;*}
#contenedor .icono.i3 { left:0px; top:100px;*}
#contenedor .icono.i4 { left:0px; top:150px;*}
#contenedor .icono.i5 { left:100px; top:0px;*}
#contenedor .icono.i6 { left:100px; top:50px;*}
</style>

En este caso, mientras siempre asignes las clases de los enlaces en orden (sin importar que icono tenga adentro), siempre deberían respetar el orden que le asignas.