div increases too high when adding buttons

0

I put a button on a div but when you add it, the div increases a lot and is stuck to the footer, besides the button leaves the div, I do not know what it can be.

<div class='caja'>--CONTENIDO</div>


<a href="javascript:cargar();" class="boton">MÁS</a>



<style>
.caja {
height: auto;
background: #fff;
width: 100%;
margin: 0 auto;
position: relative;
bottom: 630px;
}

.boton
background: #ff4000; 
color: #fff; 
border-radius: 5px; 
padding: 10px; 
font-style: normal;
width: 20%;  
margin: 0 auto; 
display: block; 
position: absolute; 
bottom: 0px; 
right: 0; 
left: 0;
}
</style>
    
asked by code2018 03.12.2018 в 04:27
source

1 answer

0

Try this way:

.caja {
	height: auto;
	background: #fff;
	width: 100%;
	margin: auto;
	bottom: 630px;
}

.boton {
	background: #ff4000;
	color: #fff;
	border-radius: 5px;
	padding: 10px;
	font-style: normal;
	width: 20%;
	margin: auto;
	display: block;
}
<!DOCTYPE html>
<html>
	<head>
	  <title></title>
	</head>
	<body>
            <div class='caja'>
              --CONTENIDO
              <button class="boton">
                <a href="javascript:cargar();"></a>MÁS
              </button>
            </div>
	 </body>
    </html>
    
answered by 03.12.2018 в 13:46