问题:

I'm having an issue where divs are overlapping each other, even though they should appear below each other, I have no idea why this is happening.

Container

  <div class="container">         <div class="box" style="float:right">             <p></p>         </div>          <div class="box" style="float:left">             <p></p>         </div>               <div class="longContent topLongContent">          <h2>Long Content</h2>          <p></p>             </div>              <div class="longContent">          <h2>Long Content</h2>          <p></p>             </div>              <div class="longContent">          <h2>Long Content</h2>          <p></p>             </div>    </div>

Style Sheet

  body{ background-image:url('sos.png'); color:#ecf0f1; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  font-weight: 300;    }    .container{ width:50%; margin: 0 auto;   }      .box{ width:49%; background-color:#2c3e50;    margin-top:5%;    }     .box p{  padding: 2% 5% 3% 5%;    }     .box h2{  font-weight:800;  padding: 2% 5% 0% 3%;     }     .longContent{      width:100%;  margin: 0 auto;  background-color:#34495e;  margin-top:2%;     }     .topLongContent{  margin-top:16%;    }     .longContent p{  padding: 2% 5% 3% 5%;    }     .longContent h2{  font-weight:800;  padding: 2% 5% 0% 3%;    }     .header{  width:100%;  background-color:#2c3e50;    /*  Drop shadow Bottom */ -webkit-box-shadow: 0 6px 4px -6px black;    -moz-box-shadow: 0 6px 4px -6px black;         box-shadow: 0 6px 4px -6px black;     }       .header h1{   font-size:2.5em;   font-weight:900;   padding: 1% 0% 1% 3%;      }       .callToAction{    float:right;    font-size:1.25em;    margin:-2% 5% 0% 0%;    color:#f39c12;       }

I have even tried removing the .topLongContent but the content still over laps and acts as though the box divs are part of the longContent divs.

回答1:

Try clearing the floats with clear: both on the .longContent elements.

回答2:

Use clear:both for class longContent

回答3:

The .clear property may help you.

Links

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

http://www.w3.org/wiki/CSS/Properties/clear

转载请标明出处:Divs overlapping

文章来源: Divs overlapping

标签

padding