Home/ Questions/Q 7503915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T21:23:34+00:00

Here is my page’s HTML: <body> <header></header> <div class=conteudo_representantes></div> <div class=rodape></div> </body> I have

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0