I have a div search and I want to have another div show_cabañas . I wish that in the form, which is inside search , if we press Search we open / load the div show_cabañas and that it appears below the div search with a small space enter both divs ...
How do I place a div under another div with css?
I would like you to place each cabin within a div in turn, which div will contain the name of the hut, images and their opinions.
HTML / PHP code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Reservar</title>
</head>
<body background="imagenes/fondo_campo1.jpg">
<div class="busqueda">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="mibusqueda" id="mibusqueda" method="POST" class="form_buscar">
<h2>RESERVAR</h2>
<label for="check_in"><b>Entrada:</b></label>
<input type="text" placeholder="Fecha de entrada" name="check_in" id="check_in" value="<?php if(isset($_POST['check_in'])){ echo $_POST['check_in']; }?>">
<label for="check_out"><b>Salida:</b></label>
<input type="text" placeholder="Fecha de salida" name="check_out" id="check_out" onchange="calculoNoches();" value="<?php if(isset($_POST['check_out'])){ echo $_POST['check_out']; }?>" disabled>
<div align="center">
<input type="submit" value="Buscar" name="buscar" id="buscar"><br/>
</div>
</form>
</div>
<br/><br/><br/><br/>
<div class="mostrar_cabanas">
<!--Código si hemos pulsado el botón Buscar...-->
</div>
</div>
</body>
</html>
CSS Code:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body{
/*background: #DEDEDE;*/
display: flex; /*Centrado en la página tanto vertical como horizontal.*/
min-height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; /*Imagen de fondo no se vaya con el scroll de la página.*/
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.busqueda{
margin: auto;
width: 50%;
max-width: 500px;
background: #F3F3F3;
padding: 18px;
border: 2px solid rgba(0,0,0,0.2);
}
h2{
text-align: center;
margin-bottom: 20px;
color: rgba(0,0,0,0.5);
}
input{
display: block;
padding: 10px;
width: 100%;
margin: 30px 0;
font-size: 14px;
}
input[type="submit"] {
background: linear-gradient(#FFDA63, #FFB940);
border: 0;
width: 160px;
color: brown;
opacity: 0.8;
cursor: pointer;
border-radius: 20px;
margin-bottom: 0;
}
From start the div search is focused on the whole page (ALL OK), when I press " Search ", I get all the available cabins but at side of the div search and I'm off center.
Possible solution:
1) What I want is that when we press button SEARCH , we will generate the div show_cabanas but UNDER div search .
2) I have a background image for the whole page (incorporated in body ), how would the background image make the background image of divs show_cabanas ? That is, the div show_cabanas has a white background to be able to visualize the data well.
Image of the problem:
