I have a problem that is difficult to explain, so I leave as much data as possible.
Clarification: I'm using bootstrap.
First I share an image of the area in question
Clicking on the magnifying glass activates a toggler that displays the input search engine. My idea is that once done enter / click in Search, the results of the search are shown in a div that is hidden on RECOMMENDED. This is not toggler because I reload the page to make the php request, it's just an empty div that fills up to show the search results.
The problem is that when this div appears, it literally breaks all the styles that I already have armed.
I do not really know where a div starts and where the other begins. I simply want it to be shown one above the other, that the REC RECOMMENDED div moves down to show the results of the search in the first place.
Now if I leave code. First the css involved and then the html / php:
#rightCol {
background: #b57d29;
margin-top: 1vw;
border: 0.25vw solid #4d0000;
}
.miniLibro {
width: 250px;
height: 400px;
background-size: 100% 100%;
float: left;
margin-bottom: 3%;
transition: 0.5s;
color: #ffffff;
}
.miniLibro:hover {
cursor: pointer;
filter: brightness(130%);
}
.titulo {
position: relative;
height: 42px;
background: #000000;
filter: opacity(80%);
font-size: 0.9em;
text-align: center;
}
.stock {
position: relative;
margin-top: 131.1%;
transition: 0.5s;
font-size: 1em;
}
.precio {
position: relative;
text-align: center;
font-size: 1.3em;
float: right;
border-radius: 40%;
width: 26%;
margin-top: -12.5%;
background-color: #b71f1f;
transition: 0.5s;
}
.miniLibro:hover>.precio {
filter: brightness(80%);
}
.enStock {
background-color: #173019;
width: 35%;
text-align: left;
height: 30px;
border-radius: 0 90% 0 0;
}
.pocoStock {
background-color: #e09e02;
text-align: left;
width: 35%;
height: 30px;
border-radius: 0 90% 0 0;
}
.agotado {
background-color: #e03901;
text-align: left;
width: 35%;
height: 30px;
border-radius: 0 90% 0 0;
}
.miniLibro:hover>.stock {
filter: brightness(80%);
}<div class="container">
<div class="row">
<div id="leftCol" class="col-lg-4">
</div>
<div id="rightCol" class="col-lg-8">
<?php
if (isset($_POST['buscar'])) {
require 'conexion.php';
$src = $_POST['src'];
$consulta = "
SELECT titulo, imagen, categoria, precio, cantidad
FROM lecturas_db.inventario
WHERE titulo LIKE '%$src%'
";
$resultado = mysqli_query($conexion,$consulta);
$direct = 'img/cover/';
/* $_SERVER['DOCUMENT_ROOT'].'/Lecturas Comics/ agregar para ruta completa */
if (!$resultado) {
echo "Error";
}
else { ?>
<div class="container">
<h2 align="center">
<?php
if(mysqli_num_rows($resultado)>0) {
echo "Mostrando resultados para '".$_POST['src']."'.";
} else {
echo "No hay resultados para '".$_POST['src']."'.";
} ?>
</h2>
<?php
while($row = mysqli_fetch_array($resultado)) {
if($row['categoria'] == 'proximamente') { ?>
<a href="busProx.php?titulo=<?php echo $row['titulo'] ?>">
<div
style="background-image: url('<?php echo $direct.$row["imagen"] ?>')"
class="miniLibro">
<div class="titulo" align="center">
<b><?php echo $row['titulo'] ?></b>
</div>
<div class="stock" align="left">
<div class="proximamente"> <b>
Próximamente
</b></div>
</div>
</div>
</a>
<?php } else { ?>
<a href="busLibro.php?titulo=<?php echo $row['titulo'] ?>">
<div
style="background-image: url('<?php echo $direct.$row["imagen"] ?>')"
class="miniLibro">
<div class="titulo" align="center">
<b><?php echo $row['titulo'] ?></b>
</div>
<div class="stock" align="left">
<b><?php if($row['cantidad'] > '3') { ?>
<div class="enStock">En Stock</div>
<?php } if($row['cantidad'] <= '3' && $row['cantidad'] > '0') { ?>
<div class="pocoStock">
<?php echo $row['cantidad'] ?> en Stock
</div>
<?php } if($row['cantidad'] == '0') { ?>
<div class="agotado">Agotado</div>
<?php } ?>
</b>
</div>
<div class="precio" align="right">
<b><?php echo "$".$row['precio'] ?></b>
</div>
</div>
<?php } ?>
</a></div><br>
<?php }
}
}
?>
<div class="container">
<h1 align="center"><b>RECOMENDADOS</b></h1><br>
<?php
require 'conexion.php';
$direct = 'img/cover/';
$sql = "
SELECT titulo, imagen, precio, cantidad
FROM lecturas_db.inventario
WHERE categoria = 'recomendado' ORDER BY titulo ASC
";
$resultado = mysqli_query($conexion,$sql);
while ($row = mysqli_fetch_array($resultado)) { ?>
<a href="busLibro.php?titulo=<?php echo $row['titulo'] ?>">
<div
style="background-image: url('<?php echo $direct.$row["imagen"] ?>')"
class="miniLibro">
<div class="titulo" align="center">
<b><?php echo $row['titulo'] ?></b>
</div>
<div class="stock" align="left">
<b><?php if($row['cantidad'] > '3') { ?>
<div class="enStock">
En Stock
</div>
<?php } if($row['cantidad'] <= '3' && $row['cantidad'] > '0') { ?>
<div class="pocoStock">
<?php echo $row['cantidad'] ?> en Stock
</div>
<?php } if($row['cantidad'] == '0') { ?>
<div class="agotado">
Agotado
</div>
<?php }
?></b>
</div>
<div class="precio" align="right">
<b><?php echo "$".$row['precio'] ?></b>
</div>
</div>
<?php } ?>
</a>
</div>
</div>
</div>
</div>Update : After carefully reviewing the code in case I had left some div open or closed more, and after not finding an error, I decided to check the location of the containers from the same browser and these they are perfectly located, one on top of the other.
The problem is that the content of these containers goes out. I show you
That is the container of my search, see how the container is well located but the book is on the outside. Now I show you the next container.
See how in reality only the title marks me.