Overlay of Divs

Asked

Viewed 858 times

0

I have two Divs, and the bottom is overlapping the top, IE, DIV propaganda_rotativa está sobrepondo a DIV barra_inf. But when I test with just this bit of CSS it works. Which of my CSS is causing this situation? Below I put the full version of my CSS for verification.

Part that works: https://jsfiddle.net/gladisonperosini/cuc88L52/

Part complete but overlapping: https://jsfiddle.net/gladisonperosini/cuc88L52/2/

See excerpt from 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 anyone can help me...

html css
  • 1

    You forgot to close the first <div>. Now, if you decrease the size of the window, the <p> gets a big size and ends up leaving the <div> Dad because she’s at set height.

  • I don’t understand why the overlap

  • It’s just that I couldn’t identify that overlap you said. In the fiddle you mentioned, your first <div> was not closed, so it caused a slight overlay of the image in the div. Only if we decrease the width of the window, the text of the <div> ends up leaving the limit and the image overlaps this text... that’s it?

  • I cannot see any overlap in either of the two examples... :/

  • The two examples opened alike.

1 answer

0


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

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>

Browser other questions tagged html css

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