Alinear el contenido con float
Profesor: Javier López
Volver
Propuesta de la actividad
Alinear los 3 <article>
Alinear espacios entre los <article>
Recolocar el <footer>
Resultado final

Alinear los 3 <article>
Para colocar cualquier caja (div, article, section...) a la derecha (o izquierda) de otra, únicamente es necesario que todas las cajas implicadas:
  1. Tengan un ancho prefijado (width).
  2. Tengan un float (left o right).
estilos.css
.cuadros{
   float:left;
   width:240px;
   border:1px lightgray solid;
   border-radius:3px;
   background-color:white;
   text-align:center;
   padding:5px 5px 22px 5px;
   box-shadow:0px 0px 4px gray;
}

(El código resaltado en rojo es el nuevo, el resto, como es el caso del width imprescindible, ya existía de los temas anteriores).

Con sólo esta línea (float:left;) todos los <article> (que tienen el class="cuadros") se alinean uno al lado del otro, empezando por la izquierda.


Ahora tenemos dos aspectos a solucionar:

Añadir espacios entre los <article>
estilos.css
#cuadro2{
   margin:0 112px 0 112px;
}
Aunque para separar horizontalmente los 3 <article> podríamos añadir un sencillo margin-right:75px, tendríamos el problema de que añadiría 75 píxeles de margen también a la derecha del último cuadro, con lo que la composición no quedaría centrada.

Para solucionar esto, en vez de ponerle márgenes de separación a los 3 cuadros, le estamos poniendo un único margen izquierdo y uno derecho (ambos de 112px) sólo al cuadro que se encuentra en el centro (cuadro2).

<article  id="cuadro2" class="cuadros">
  <div id="imagen2" class="imagenes">
     <img src="img/imagen2.png">
  </div>
     <h3>Con larga experiencia</h3>
     Llevamos <b>desde 1998</b> ofreciendo propuestas
     diferentes y acciones educativas concretas a escenarios
     diversos.
     <p>
     Diseñamos una solución educativa creativa a su problema
     cotidiano.
</article>
Para hacer esto, sólo tenemos que asegurarnos de que el segundo <article> tenga como id el nombre cuadro2.

El class y los id tanto de <article> como del siguiente <div> fueron completados en el tema 9: Bordes y bordes redondeados.

Recolocar el <footer>
estilos.css
footer{
  clear:both;
  font-family:alegreya-light;
  font-size:13px;
  color:silver;
}
En el capítulo anterior (tema 12: Tipografías) creamos un selector para el <footer> para darle propiedades de tipografía, tamaño y color de la fuente.

Ahora vamos a añadir una línea de código fundamental al utilizar float.

Al utilizar float podemos dejar espacios vacios a la derecha (o izquierda) del último div recolocado con float:left, por lo que la siguiente caja puede colocarse en esta posición vacía.

Para indicar a un div que NO aproveche este espacio vacío, sino que se coloque (abajo) en una línea nueva utilizamos clear:both;

Haz clic aquí para o bien en el siguiente botón para acceder al siguiente tema donde