Overlay of DIVs

0

I have two DIVs, the lower one is overlapping the top one, ie the propaganda_div_div is overriding the IVD_inf_bar.

>

Part that works: link

Full, but overlapping part: link

See the snippet of CSS code:

CSS:

div.barra_inf{
    width: 100%;
    height: 50px;
    max-width: 1300px;
    margin: 0px auto;
    background-color: #FF8922;
}
div.propaganda_rotativa{
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
}
div.propaganda_rotativa img{
    max-width: 1200px;
    width: 100%;
    max-height: 180px;
    height: auto;
}

See the full CSS:

*{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
div.principal{
    background-color: #ccc;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}
div.cabecalho{
  width: 100%;
  overflow:auto;
  background-color: #FF8922;
  border-bottom:#DE5207 3px solid;
}
/* CABEÇALHO */
div.logo{
  float: left;
  background-image:url(../imagens/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 21.42857142857143%; /* 300px */
  height: 80px;
}
div.buscaguia{
  float:left;
  width: 39.28571428571429%;
  height: 80px;
  line-height: 80px;
}
div.menutopo{
  float:right;
  width: 39.28571428571429%;
  height: 80px;
  line-height: 100px;
}
div.super_banner{
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
}
div.super_banner img{
    max-width: 1200px;
    width: 100%;
    max-height: 500px;
    height: auto;
}
div.propaganda_rotativa{
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
}
div.propaganda_rotativa img{
    max-width: 1200px;
    width: 100%;
    max-height: 180px;
    height: auto;
}
div.barra_inf{
  width: 100%;
  height: 50px;
  max-width: 1300px;
  margin: 0px auto;
  background-color: #FF8922;
}
div.buscaguia form{
  left: 50%;
  text-align: center;
}
div.buscaguia button{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}
div.buscaguia input{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}
header{
  background-color: #fff;
  margin-bottom: 10px;
}

header nav a{
  color:#ffffff;
  text-decoration: none;
  font-size: 15px;
}
header nav ul{
  margin: 0px;
  padding: 0px;

}
header nav li{
  float:right;
  display: inline;
  padding: 0 20px 0 20px;
  line-height: 80px;
}

HTML:

<div class="barra_inf">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div>
<div class="propaganda_rotativa">
    <p>
        <img src="./propaganda_rotativa/supportgv.png" />
    </p>
</div>

If someone knows how to help me ...

    
asked by anonymous 12.06.2017 / 20:22

1 answer

0

Your HTML looks messy. It seems to me that it has open DIV that should be closed in other points and many unnecessary elements. Try this:

HTML:

<div class="barra_inf">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="propaganda_rotativa">
    <img src="http://www2.uol.com.br/guiadolitoral/imgnoticia/conheca-a-historia-por-tras-da-iconica-foto-de-einstein-mostrando-a-lingua-4030-f1.jpg" />
  </div>
    
12.06.2017 / 21:53