[SOLUCIONADO] posts en dos columnas

[laura_moreno14]

tengo un div que contiene un numero indefinido de divs, los cuales quiero que se posicionen en dos columnas con margen entre ellas pero con una margen 0 a los lados.

No tengo problema en ponerlos en dos columnas con float:left, el problema es el margen entre ellos, ya que si les pongo margin-left o right me queda un margen que no deseo a un lado o a otro de las columnas.

Hasta ahora lo mas que he conseguido en usar :first-child pero solo afecta al primero de todos, las siguientes filas no quedan igual.

[pzin]

Puedes ponerle un margen derecho a todos los elementos flotados, y utilizar nth-child() para quitar ese margen a cada segundo div:

Código CSS:

div {
  margin-right: 10px;
}
 
div:nth-child(even) {
  margin-right: 0;
}
 

También podrías usar así el selector:

Código CSS:

div:nth-child(2n+1){}
 

O simplemente sólo setear el margen derecho a la primera columna que a priori sería más correcto:

Código CSS:

div:nth-child(odd){
  margin-right: 10px;
}
 

Un buen artículo de Chris Coyier sobre cómo funciona nth-child, ya que es un poco atravesado: http://css-tricks.com/how-nth-child-works/

[laura_moreno14]

Muchas gracias Pzin por tu rápida y buena respuesta. No conocía este selector y me ha parecido muy interesante, la verdad es que creo que me va a ser muy util de aquí en adelante.

Una pena que no funcione en IE, por lo que si alguien conoce una forma alternativa, estoy abierta a otras soluciones.

Gracias de nuevo pzin, si pudiera te daba mas puntos!

[pzin]

Tengo entendido que funciona en IE9 e IE10. Como no tengo instalado IE, ¿podrías confirmarlo? Por si vienen otros con el mismo problema a golisnear el tema.

Hacerlo funcionar mediante CSS puro para IE8 pudiera hacerse con un selector de hermanos; +.

Código CSS:

/* Primero (primero primera fila) */
div:first-child  {
  margin-right: 0;
}
 
/* Tercero (primero segunda fila) */
div:first-child + div + div  {
  margin-right: 0;
}
 
/* Quinto (primero tercera fila) */
div:first-child + div + div + div + div  {
  margin-right: 0;
}
 

Y así sucesivamente. Es un poco arcaico, repetitivo y feo. Muy feo.

Usando Sass o less podría hacerse fácilmente y luego llamarlo mediante un comentario condicional para IE.

Pero claro, si el contenido es dinámico se complica aún más el asunto.

Yo personalmente me estoy olvidando de IE8.

[laura_moreno14]

En IE 10 si que funciona, así que perfecto.

Gracias por darme otra solución, suelo tener problemas al centrar este tipo de cosas así que seguro que les daré uso.