[SOLUCIONADO] Maquetación a tres columnas

[crafter_v]

Hola, se trata de un sitio con un width de 960px pensado a tres columnas con diferentes artículos. Las columnas se generan automaticamente solo gracias a la anchura fijada para los artículos (30%) y a la etiqueta "float left". La idea era ponerles un margen derecho del 5% a los artículos de la primera y la segunda columna para generar los intercolumnados, pero no se como hacerlo para que este margen no afecte a la tercera columna (ya que los artículos han de tener la misma clase).

En resumen:

Código HTML:

<section id="articles_list">

    	<article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui. Morbi in tempus massa. Proin in quam vestibulum, sollicitudin libero et, finibus dolor. 
                    </p>
        </article>
        
        <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui.
                    </p>
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui.
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui.
                    </p>
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Cras molestie consectetur odio in rhoncus. Sed faucibus convallis quam, at elementum neque pulvinar at. 
                    </p>
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Maecenas suscipit pulvinar ante nec faucibus. Cras molestie consectetur odio in rhoncus. Sed faucibus convallis quam, at elementum neque pulvinar at. 
                    </p>
        </article>
        
    </section> 

Código:

/*Articles_list*/

#main #articles_list {
	clear: both;
	width:100%;
}

#main #articles_list article {
	width:30%;
	margin-bottom:40px;
	margin-right:5%;
	padding-bottom:40px;
	border-bottom:1px solid #999999;
	overflow:hidden;
	float:left;
}

[webosiris]

usa :nth-child(3n)

Código CSS:

#articles_list article:nth-child(3n){
    margin-right:0;
}
 

[crafter_v]

Gracias! funciona bien, pero me da un problema en la versión responsive, al hacer pequeño el browser quiero que las 3 columnas se conviertan en 2. Columnas con width de 47% y margen del 6% a la derecha. Usando la misma propiedad funciona, pero hace algo raro, en la tercera imagen no deja margen.

Código:

@media screen and (max-width:720px){
		#main #articles_list article {
		width:47%;
		margin-right:6%;	
	}	

	#main #articles_list article:nth-child(2n){
	margin-right:0;
}
}

[crafter_v]

No sé si sera correcta la solución, pero funciona, ¿que te parece?

Código:

@media screen and (max-width:720px){
	
	
#main #articles_list article:nth-child(3n){
	margin-right:6%;
}
	
	#main #articles_list article:nth-child(2n){
	margin-right:0;
}
		#main #articles_list article {
		width:47%;
		margin-right:6%;	
	}	

	
}

[webosiris]

una opción es esa y la otra (creo que más prolija) es quitarle el margen a la 3° columna también dentro de un @media para que no te lo herede y lo tengas luego que estar reescribiendo de nuevo

[crafter_v]

Parece más lógico. Gracias!