Internal DIV overlaps external

Asked

Viewed 155 times

1

I have a div internal overlapping the external.

Behold:

inserir a descrição da imagem aqui

Note in the image above that the div external does not involve the whole internal.

HTML and CSS

.conteudo{
  width: 100%;
  max-width: 1200px;
  border: 1px solid #ccc;
  margin: 10px auto;
  box-sizing: border-box;
}
.menu{
  width: auto;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  font-size: 20px;
}
.lista{
  width: 100%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}
.lista-recursos{
  position: relative;
  float: left;
  width: 25%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  background-color: #ccc;
  margin-bottom: 20px;
  font-size: 13px;
  text-align: center;
}
.link-lista{
  text-decoration: none;
  font-size: 13px;
  background-color: #ccc;
}
<div class="conteudo">
    
<strong><div class="menu">Lista - Guia comercial</div></strong>
    
    <?php
    $lista=mysqli_query($con,"select id,titulo,status from empresas");
    while($painel_lista=mysqli_fetch_array($lista))
    {
    ?>
    	<div class="lista">
    <?php echo $painel_lista['titulo']; ?>
    	</div>
    
    	<div class="lista-recursos">
    	<a href="editar-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>" class="link-lista">EDITAR</a>
    	</div>
    
    	<div class="lista-recursos">
    	<?php 
    	if ($painel_lista['status'] == 1) {
    		?>
    	 	<a href="status-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>&status_alterar=2" class="link-lista">ATIVADO</a>
    	 <?php
    	 } else {
    	 ?>
    	 	<a href="status-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>&status_alterar=1" class="link-lista">DESATIVADO</a>
    	 <?php
    	 }
    	 ?>
    	</div>
    
    	<div class="lista-recursos">
    	<a href="confirmar-deletar.php?id=<?php echo $painel_lista['id']; ?>" class="link-lista">DELETAR</a>
    	</div>
    
    	<div class="lista-recursos">
    	<a href="banner-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>" class="link-lista">BANNER</a>
    	</div>
    
    <?php
    }
    ?>
    
</div>

css3

  • Can you put the rendered HTML here? ie what comes to the browser, and not PHP.

  • creates a div at the end like this: <div style="clear:Both"></div> has to be the last one on the list

1 answer

0

Your problem is you’re using float:left in the child elements of container. When you put float in the Sons the Father loses the reference of the values of the box-model of these elements, for now they are "floating" in the gift.

One of the techniques to solve this is putting overflow:auto in the Father container, even so the Son having float he will not "run away" from the Father’s scope.
OBS: I just removed the PHP tags to better render in the example.

See the example how it looks.

  .conteudo {
    width: 100%;
    max-width: 1200px;
    border: 1px solid #ccc;
    margin: 10px auto;
    box-sizing: border-box;
    overflow: auto;
  }

  .menu {
    width: auto;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    font-size: 20px;
  }

  .lista {
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
  }

  .lista-recursos {
    position: relative;
    float: left;
    width: 25%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ccc;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
  }

  .link-lista {
    text-decoration: none;
    font-size: 13px;
    background-color: #ccc;
  }
<div class="conteudo">

  <strong>
    <div class="menu">Lista - Guia comercial</div>
  </strong>


  <div class="lista">
    titulo
  </div>

  <div class="lista-recursos">
    <a href="editar-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>" class="link-lista">EDITAR</a>
  </div>

  <div class="lista-recursos">

    <a href="status-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>&status_alterar=2" class="link-lista">ATIVADO</a>

    <a href="status-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>&status_alterar=1" class="link-lista">DESATIVADO</a>

  </div>

  <div class="lista-recursos">
    <a href="confirmar-deletar.php?id=<?php echo $painel_lista['id']; ?>" class="link-lista">DELETAR</a>
  </div>

  <div class="lista-recursos">
    <a href="banner-guia-comercial.php?id=<?php echo $painel_lista['id']; ?>" class="link-lista">BANNER</a>
  </div>

</div>

TIP: In this answer there are some details that may be of interest although not exactly the same problem. Why margin-top affects the father div

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.