2

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.enter image description here

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.

3 Answers3

8

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

alexej_d
  • 450
  • 5
  • 13
  • I would have never have known how to have fixed that, didn't even know clear:both was a feature. Thanks guys, really appreciated. –  Jan 10 '14 at 00:12
  • You are welcome. Please accept my answer as the right one so that others can quickly see what worked in your case. – alexej_d Jan 10 '14 at 10:50
1

Use clear:both for class longContent

JerryHuang.me
  • 1,790
  • 1
  • 11
  • 21
  • Thanks :) Whish I could have accepted both answers since they were so quick. –  Jan 10 '14 at 00:13
1

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

Jason Sgalla
  • 176
  • 9