Geek Answers Handbook

Why does one <div> overlap another <div>?

Here is my HTML page:

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

I have content inside a .conteudo_representantes div that goes above the .rodape div (footer).

Here is my CSS page:

 .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?

+8
html css
source share
2 answers

The problem is that your div conteudo_representantes does not fully load all its contents, so the footer is in the correct relative position as needed, and the div's representations are overflowing for some reason

EDIT:

This is actually related to how you manipulated the float attributes.

Your executive div is floating to the left, but the footer is not working. You can verify this by disabling float:left from the representatives .

This is a common reason for div overlapping.

When placing an HTML page, consider how each div element stacks onto the next. The float will ultimately decide how to stack the div

Quick controls for proper placement of items

+9
source share

If I'm right, this is because #container is set to min-height . This allows it to grow if the content exceeds this height. And since it is min-height , it does not push the footer down when the content gets bigger.

Update: The problem should be solved by adding the clear:both #footer to #footer .

0
source share

More articles:


All Articles