CODEWITHSUNDEEP
htmlcss
Preston
Preston

Reputation: 2185

Why is one <div> overlapping another <div>?

Here is my page's HTML:

<body>
  <header></header>
  <div class="conteudo_representantes"></div>
  <div class="rodape"></div>
</body>

I have content inside the .conteudo_representantes div that is going over the .rodape (footer) div.

Here is my page's CSS:

.conteudo_representantes {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    min-height:586px;
    margin-top:40px;
    position: relative;
}


.rodape {
    position: relative;
    width:960px;
    height:50px;
    margin:36px auto;
    background:transparent url(../img/header_pattern.png) repeat top left;
}

The full page source can be found in this example. (Click on the second line of the list where it says: 02 - São Paulo - Capital, to see this problem in action.)

What am I doing wrong?

Upvotes: 12

Views: 95297

Answers (2)

ayyp
ayyp

Reputation: 6598

If I'm correct, it's because you have min-height specified for #container. This allows it to grow should the content exceed that height. And because it's min-height, it's not pushing the footer down when the content grows larger.

Update: Problem should be solved by adding a clear:both property to the #footer.

Upvotes: 1

RonnyKnoxville
RonnyKnoxville

Reputation: 6394

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

Upvotes: 16

Related Questions