Menu
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?
283
This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.
Just remove the min-width from your CSS! And give min-width to the container with margin: auto to make it center. Save this answer.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
