Internal DIV overlaps external

Question

Internal DIV overlaps external

Navigation

#1 by (0 votes)

2

I have an internal%% of the internal that overlays the external.

See:

Noticeintheimageabovethatthe%ofexternal%doesnotinvolvetheentireinternal.

HTMLandCSS

.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

asked by anonymous 08.11.2017 / 12:56

1 answer

atOffset using map slideToggle (); open and close clicking on the same link, if you click on another just change content of the div

score 0 · Answer 1

Your problem is that you are 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% of these elements, because they are now "floating" in the gift.

One of the techniques to solve this is putting box-model in the Father overflow:auto , so even the Son having container he will not "escape" to the Father's scope. I just removed the PHP tags to render better in the example.

See the example as it stands.

  .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 you have some details that may be interesting although not exactly the same problem. Why margin-top affects the parent div