Why Are My Divs Overlapping

Why are my divs overlapping?

They are overlapping because you are floating a div, but aren't clearing the float.

Use the clearfix method to clear the float. Add a class container to your container divs and use this CSS:

http://jsfiddle.net/57PQm/7/

.container {
    border: solid 1px #ff0000;
    zoom: 1; /* IE6&7 */
}

.container:before,
.container:after {
    content: "";
    display: table;
}

.container:after {
    clear: both;
}

You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.

Divs are overlapping, how to fix? CSS

Please try the following:

@media screen and (min-width: 40rem) and (max-width: 60rem) {
    #div1 {
        float: left;
        width: 200px; /* change this value to your own needs */
    }
    #div2 {
        float: right;
        width: 200px; /* change this value to your own needs */
    }
}

Next time, it would be really helpful to provide an example of your code in jsfiddle.net

Why are my divs overlapping eachother?

As I wrote in the comment above either you have to clear the float or add overflow: hidden to .feature-card

With clear: both:

.features-list{    width: 100%;    background-color: #ffffff;}
.feature-card{    padding-left: 50px;    padding-right: 50px;    background: #ffffff;    border-radius: 4px;    margin-bottom: 10px;    box-shadow: 0 0 3px 1px #e0e0e0}
.feature-container{    width: 33%;    float: left;}
.eyecatcher{    color: #95C123;    height: 40px;    font-weight: bold;    font-size: 20px;}
.video-explanation{    background: #7d7d7d;    padding: 45px 0;}
.feature-card:after {  content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden;}

<div class="features-list">  <div class="feature-card">    <div class="feature-container">      <div class="eyecatcher">        asdasdasd2      </div>      <div>        asdasdasd      </div>    </div>    <div class="feature-container">      <div class="eyecatcher">        asdasdasd2      </div>      <div>        asdasdasd      </div>    </div>    <div class="feature-container">      <div class="eyecatcher">        asdasdasd2      </div>      <div>        asdasdasd      </div>    </div>    <div class="feature-container">      <div class="eyecatcher">        asdasdasd2      </div>      <div>        asdasdasd      </div>    </div>    <div class="feature-container">      <div class="eyecatcher">        asdasdasd2      </div>      <div>        asdasdasd      </div>    </div>  </div></div><div class="video-explanation">    Video Explanation</div>

Why does displaying my divs as inline cause them to overlap my h1?

Only block elements respect width and height rules. Inline elements just flow with their text content. The overlap is caused by the padding and the fact that the divs are further down in the DOM, so they're drawn after and on top of previous elements.

Try changing your divs to display: inline-block instead.

Why is my div overlapping other divs?

You need to change all the position: fixed; to position: relative; for elements that can be resized when the screen size changes. fixed maintains the <div> tag's starting position and can grow and shrink from there. So, when you shrink to a mobile screen, the size of the text you have causes the <div> that contains them to resize and overlap the the next <div>. When you change the position to relative, the <div>'s are placed in order, and if something causes the <div> to be resized, then the <div>'s that follow it are adjusted and prevent overlapping.

You can see it fixed with the edited fiddle: http://jsfiddle.net/57PQm/78/

CSS Why do the divs overlap?

I don't see the HTML for the middle div, but position absolute means a fixed position relativ to the "frame" in your case to the div #container. So the div nav and the div middle overlap cause they ignore each other and are both positioned in relative to the div #container. you can give the divs fixed witdh and height and fixed margin so they don't collide. Example:

.nav{position: absolute;margin-top:  0;margin-left: 0;width: 300px;}.middle{position: absolute;margin-top: 0;margin-left: 300px;}

Why is one div overlapping another div?

The issue is that your div conteudo_representantes is not wrapping all of its contents properly, so the footer is in the correct relative position as far as it is concerned and the representantes div is overflowing for some reason

EDIT:

It is actually to do with the way you have managed your float attributes.

Your div representantes floats left, but the footer does not. You can test this by turning float:left off from the representantes div.

This is a common cause of divs overlapping.

When laying out a HTML page, consider how each div element stacks onto the next. The float element will ultimately decide how the divs stack

Heres a quick guide to stacking elements correctly