Ejercicios

Ejercicio 9/10 || Propiedades de posicionamiento

Usa todas tus habilidades para lograr el resultado esperado. Las alturas de las cajas azul, roja y verde son 200, 100 y 50 pixeles respectivamente. La caja roja se separa del borde superior por un 6% y el borde superior de la caja azul ocupa tres cuartos (3/4) de la misma. Los textos se separan al 5% tanto de la izquierda como la derecha de sus cajas.

Código inicial

#blue {
  background-color: #8D94FF;
  width:33.33%;
  height: 50px;
  border: 1px solid #0000B0;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

#red {
  background-color: #E8B190;
  width:33.33%; 
  height: 50px;
  border: 1px solid #CC0000;  
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

#green {
  background-color: #CAE368;
  width:33.33%; 
  height: 50px;
  border: 1px solid #65B661;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

BLUE BOX BLUE BOX BLUE BOX BLUE BOX BLUE BOX

RED BOX RED BOX RED BOX RED BOX RED BOX RED BOX

GREEN BOX GREEN BOX GREEN BOX GREEN BOX