Footer. It Overlaps On Div

I've got a problem with the footer of my website. It overlaps to the content div. I've got a structure like this: The problem is that in one page I've got an image and a paragraph

Solution 1:

its because you are using position:absolute; wich mean that any element with position absolute will be placed there no matter what, so you better use position:relative;

Solution 2:

<divid="paragraph"><p> here is where you want to make your change.
    </div><style>#paragraph::after{
      margin-top:2px;
      margin-bottom:2px;
   }

   #footer{
   clear:both;
   }
</style>

Put the style in your .css file instead of inline like this. I just wrote it to get the point across. The pseudo element "after" will add something "after" your id=paragraph element which should help with a bit of spacing between that and the footer. In addition to that, adding "clear:both" to the footer element should insure whether you add the ":after" or not that your footer "clears" all elements above it in the HTML. I added the 2px to provide a little cushioning. You can alter, or remove that as needed. I would recommend leaving at a minimum a 1px line for either margin-top or margin-bottom so it's not an empty element though.

I agree in that you may want to remove "absolute" from your styling for the position as well.

Solution 3:

Change the footers position to relative;, currently the footer is sitting on top of the container div.

Because you're using % move the footer div out of it's container to lose any inherited properties.

http://www.w3schools.com/cssref/pr_class_position.asp