Alinear ARTICLE dentro de SECTION

[xinxan22]

Buenos días,

estoy intentando hacer una caja de 75% de width y debajo 3 cajas de 25% de width.

El problema es que las 3 cajas están alineadas a la izquierda y no consigo hacer que la primera esté alineada a la izquierda, la última alineada a la derecha y la del medio pues centrada.

El código que tengo es el siguiente:

Código HTML:

#idsection{
	margin: auto;
	width: 75%; 	
}

#idarticle{
	margin: auto;
	width: 75%; 
}

#idarticle1, #idarticle2, #idarticle3{
	display: inline-block;
	vertical-align: top;
	width: 25%; 
}

#idarticle3{
	right: 0;
}

Código HTML:

<section>

  <article id="idarticle">CUADRO 75%</article>

  <section id="idsection">
    <article id="idarticle1">Caja1 25%</article>
    <article id="idarticle2">Caja2 25%</article> 
    <article id="idarticle3">Caja3 25%</article>
  </section>

</section> 

Como puedo hacer que "idarticle3" este alineado a la derecha de la etiqueta " section id='section' "

Gracias,

saludos

[pzin]

right: 0 te va a servir de poco en un elemento cuya posición es estática.

Puedes ponerle márgenes laterales de 12.5% al elemento central y ponerlo como elemento de linea. O si no, flotar los elementos a la izquierda y darle ese margen.

Código CSS:

#idsection > article {
  float: left;
}
 
#idarticle2 {
  margin: 0 12.5%;
}
 

[xinxan22]

Pero entonces el código que tengo de "display: inline-block" ya no sirve?

Porque el problema que tengo ahora es que como está justo de width, el id_article3 me salta a la línia de abajo, por el display:inline-block que me los estaba colocando en la misma línea.



#idarticle1, #idarticle2, #idarticle3{
background: #EEE;
display: inline-block;
height: 200px;
vertical-align: top;
width: 30%;
}

[pzin]

No hace falta. Flotar un elemento, en cierto modo, es como tener un elemento de bloque en linea.

[xinxan22]

Si quito el "display: inline-block" y añado el "float: left" los 3 articles me aparecen por encima de la etiqueta footer que en teoría actualmente me aparece más abajo de la web.

[pzin]

Si, eso es porque el padre no crece ya que contiene elementos flotados.

Puedes hacer varias cosas, aunque las dos más utilizadas, son:

Código CSS:

#idsection {
  overflow: hidden;
}
 

O en caso de que no te valiera ese, podrías usar esta otra técnica:

Código CSS:

#idsection:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 

[xinxan22]

Muchas gracias.

Funciona perfectamente con overflow: hidden;

Saludos

[pzin]

Si las dos técnicas funcionan. Decía que igual no te valía el primera porque lo que hace también es ocultar todo el contenido que sobresalga, en cuyo caso tendrías que usar la otra técnica.