I try so many things but i cannot make it work. The content of the form always gets at the bottom and overlap the footer. I try position absolute: bottom 0; but does not work. The footer always gets between the table and the form. I will much appreciate the help. Thanks.
This is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script defer src="autos.js"></script>
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</head>
<body>
<div class="topnav">
<!-- <a class="active" href="#home">Home</a> -->
<h1>Seguros Sunshine</h1>
</div>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
<p id="intro">Contamos con tres diferentes productos para satisfacer tus necesidades. Seguros contra Terceros, que cubre aquellas terceras personas involucradas en cualquier accidente. A su vez contamos con una oferta un poco mas ampliada con la opcion Terceros Ampliada, que incluye granizo o robo q hayas sufrido. Por ultimo tenemos un seguro contra todo riesgo llamado Riesgo Total donde te garantiza la total cobertura de tu vehiculo. A continuacion los podes ver con mas detalle.</p>
<div>
<table class="table table-bordered table-info" id="productos">
<thead>
<tr>
<th scope="col">Tipo de Seguro</th>
<th scope="col">Responsabilidad civil</th>
<th scope="col">asistencia en ruta</th>
<th scope="col">Granizo</th>
<th scope="col">Robo</th>
<th scope="col">Incendio</th>
<th scope="col">Remolque ilimitado</th>
<th scope="col">Vehiculo de sustitucion</th>
<th scope="col">Daños propios</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Terceros</th>
<td>✓</td>
<td>✓</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Terceros Ampliada</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Todo Riesgo</th>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
</tbody>
</table>
</div>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit"
class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div class="d-flex">
<footer class="page-footer">
<div class="text-center">© 2020 Copyright Seguros Sunshine</div>
</footer>
</div>
</body>
</html>
This is the CSS
* {
box-sizing: border-box;
}
.topnav {
background-color: rgb(0, 50, 80);
overflow: hidden;
padding-bottom: 5px;
padding-top: 15px;
}
h1 {
text-align: center;
color: whitesmoke;
}
h2 {
text-align: center;
color: rgb(80, 80, 80);
margin-top: 50px;
}
#intro {
color: rgb(80, 80, 80);
text-align: justify;
font-size: large;
margin-left: 80px;
margin-right: 80px;
margin-top: 30px;
}
#productos {
margin-left: auto;
margin-right: auto;
margin-top: 40px;
width: 70%;
}
@media (min-width: 992px) and (max-width: 1199px) {
#productos {
font-size: small;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#productos {
font-size: small;
overflow: scroll;
}
}
@media (max-width: 767px) {
#productos {
font-size: x-small;
font-weight: normal;
overflow: scroll;
}
}
th {
color: rgb(80, 80, 80);
}
tr {
text-align: center;
}
h3 {
color: rgb(80, 80, 80);
margin-bottom: 20px;
margin-left: 30px;
}
h4 {
color: rgb(80, 80, 80);
}
/* #preguntas {
position: relative;
z-index: 1;
} */
.table-striped {
color: rgb(80, 80, 80);
width: 400px;
margin-top: 150px;
}
th {
text-align: center;
text-transform: uppercase;
}
#nombre {
border-top: hidden;
border-left: hidden;
border-right: hidden;
margin-right: 7px;
}
#edad {
border-top: hidden;
border-left: hidden;
border-right: hidden;
margin-right: 7px;
}
#email {
border-top: hidden;
border-left: hidden;
border-right: hidden;
margin-right: 7px;
}
#telefono {
border-top: hidden;
border-left: hidden;
border-right: hidden;
}
.no-outline:focus {
outline: none;
}
#guardado {
background-color: #5bc0de;
border-radius: 5px;
color: whitesmoke;
font-weight: bold;
margin-left: 20px;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 992px) {
.col-lg-6 {
color: rgb(80, 80, 80);
margin-right: 50px;
margin-top: -370px
}
}
.font-weight-bold[for="year"] {
margin-left: 51px;
}
#color {
border: solid grey 1px;
font-style: italic;
width: 170px;
}
.cargando {
text-align: center;
}
.error {
background-color: #FBE9E7;
border: 1px solid #F4511E;
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
color: #F4511E;
}
.correcto {
background-color: rgb(211, 249, 187);
border: 1px solid rgb(50, 167, 0);
border-radius: 10px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
color: rgb(4, 150, 50);
}
#resultado {
margin-bottom: 40px;
}
#resultado div {
border-bottom: 2px solid #5bc0de;
text-align: center;
padding: 0 0 20px 0;
}
#resultado div p {
margin-bottom: 0;
}
#resultado div p.header {
background-color: #5bc0de;
margin-bottom: 10px;
margin-top: 30px;
color:white;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
}
.spinner {
margin: 100px auto 0;
padding-bottom: 70px;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
body {
height: 100%;
}
footer {
background-color: rgb(0, 50, 80);
color: whitesmoke;
padding-bottom: 10px;
padding-top: 20px;
position: absolute;
bottom: 0;
width: 100%;
}
Your problem is this:
@media (min-width: 992px) {
.col-lg-6 {
color: rgb(80, 80, 80);
margin-right: 50px;
margin-top: -370px /* this is the causing the problem */
}
}
Take way the margin-top, and also the position:absolute from the footer and the footer will sit nicely at the bottom, which I assume is what you want.