Foros del Web » Creando para Internet » CSS »

Alinear ARTICLE dentro de SECTION

Estas en el tema de Alinear ARTICLE dentro de SECTION en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/04/2013, 04:49
 
Fecha de Ingreso: septiembre-2005
Mensajes: 522
Antigüedad: 18 años, 6 meses
Puntos: 0
Alinear ARTICLE dentro de SECTION

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
  #2 (permalink)  
Antiguo 26/04/2013, 05:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Alinear ARTICLE dentro de SECTION

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:
Ver original
  1. #idsection > article {
  2.   float: left;
  3. }
  4.  
  5. #idarticle2 {
  6.   margin: 0 12.5%;
  7. }
  #3 (permalink)  
Antiguo 26/04/2013, 05:45
 
Fecha de Ingreso: septiembre-2005
Mensajes: 522
Antigüedad: 18 años, 6 meses
Puntos: 0
Respuesta: Alinear ARTICLE dentro de SECTION

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%;
}
  #4 (permalink)  
Antiguo 26/04/2013, 05:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Alinear ARTICLE dentro de SECTION

No hace falta. Flotar un elemento, en cierto modo, es como tener un elemento de bloque en linea.
  #5 (permalink)  
Antiguo 26/04/2013, 05:57
 
Fecha de Ingreso: septiembre-2005
Mensajes: 522
Antigüedad: 18 años, 6 meses
Puntos: 0
Respuesta: Alinear ARTICLE dentro de SECTION

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.
  #6 (permalink)  
Antiguo 26/04/2013, 06:10
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Alinear ARTICLE dentro de SECTION

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:
Ver original
  1. #idsection {
  2.   overflow: hidden;
  3. }

O en caso de que no te valiera ese, podrías usar esta otra técnica:
Código CSS:
Ver original
  1. #idsection:after {
  2.     content: ".";
  3.     display: block;
  4.     clear: both;
  5.     visibility: hidden;
  6.     line-height: 0;
  7.     height: 0;
  8. }
  #7 (permalink)  
Antiguo 26/04/2013, 08:15
 
Fecha de Ingreso: septiembre-2005
Mensajes: 522
Antigüedad: 18 años, 6 meses
Puntos: 0
Respuesta: Alinear ARTICLE dentro de SECTION

Muchas gracias.

Funciona perfectamente con overflow: hidden;

Saludos
  #8 (permalink)  
Antiguo 26/04/2013, 09:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Alinear ARTICLE dentro de SECTION

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.

Etiquetas: alinear, article, section
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:22.