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 ...