Necesito que estas 3 cajas queden como en la imagen que adjunto: centradas horizontalmente, a la misma altura todas (ahora cada una baja un pelín más que la anterior), y que el fondo azul llegue hasta abajo.
Para que estas cajas aparezcan, hay que sobrevolar el div
del título
Snippet a continuación: ver en pantalla completa.
.seguros{
background-color: deepskyblue;
font-family: "Barrio";
width: 100%;
color: white;
text-align: center;
font-size: 2.5em;
padding: 2% 0% 2% 4%;
}
.oculta {
display: none;
text-align: left;
font-size: 0.52em;
padding: 0.3% 0% 0% 0%;
}
.seguros:hover .oculta {
display: block;
color: #2c2b2b;
font-family: "Questrial";
}
.ficha {
border: 2px solid #2c2b2b;
width: 25%;
border-radius: 15px;
margin: 1%;
max-width: 450px;
min-width: 300px;
float: left;
overflow: auto;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
font-size: 0.8em;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: deeppink;
}
#link{
color: black;
text-decoration: none;
}
<a id="link" href="seguros.html">
<div class="seguros">
<p> >>>> Seguros & Hipotecas <<<< </p>
<div class="oculta">
<div class="ficha">
<div class="container">
<h4>Seguro baja autónomo</h4>
</div>
<img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>desde sólo 25€/mes</b></h2>
<p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
<p>Sin visitas médicas</p>
<p>Incluye un seguro de vida</p>
</div>
<div class="container">
<p>Más información <span class="promo">tel </span></p>
<p class="expire">Expires: Jan 03, 2017</p>
</div>
</div>
</div>
<div class="oculta">
<div class="ficha">
<div class="container">
<h4>Seguro baja autónomo</h4>
</div>
<img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>desde sólo 25€/mes</b></h2>
<p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
<p>Sin visitas médicas</p>
<p>Incluye un seguro de vida</p>
</div>
<div class="container">
<p>Más información <span class="promo">tel</span></p>
<p class="expire">Expires: Jan 03, 2017</p>
</div>
</div>
</div>
<div class="oculta">
<div class="ficha">
<div class="container">
<h4>Seguro baja autónomo</h4>
</div>
<img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>desde sólo 25€/mes</b></h2>
<p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
<p>Sin visitas médicas</p>
<p>Incluye un seguro de vida</p>
</div>
<div class="container">
<p>Más información <span class="promo">tel </span></p>
<p class="expire">Expires: Jan 03, 2017</p>
</div>
</div>
</div>
</div>
</a>