Footer

[y h]

Hi, I have a problem with my footer; Before I applied the new theme to my application, the footer was in the bottom of the page normally but when I changed the theme and I did some modifications but not for the footer, it came in the middle of the page with the main content (not in the middle but always under the main content of the page)

If I add position: absolute; to the footer it comes over the main content;

This is my footer code:

.footer.style2 {    padding: 74px 0 38px;    background: #000;}.footer.style2 .widget-container .widget-title{    font-size:18px;    font-style: normal;    color: #fff;    text-transform: uppercase;    margin-top: 10px;    margin-bottom:16px;}.footer.style2 .widget-container li{margin-bottom: 10px;}.footer.style2 .widget-container li span, .footer .widget-container li a span{color:#797e80;}.footer.style2 .widget-container li a:hover span{color:#e87352;}.footer .map{    width: 194px;    height: 194px;    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);    border-radius: 50%;}.footer .map .gmnoprint{display: none;}

To solve the problem I added :"margin-top: 900px;" to the .footer.style2 but actually it's not practical because when I have a page longer I have to increase the margin-top.

I don't know what I did wrong so please if anyone had faced this issue before or have an idea how to solve it tell me.

Thanks in advance:)

 

[thxman]

i am just a noob, but should you footer not be inside a div?

 

i mean a missing div, also messed up my page ones

Edited June 11, 2014 by thxman

[dsonesuk]

Usually the sticky footer is placed below a outer container whose height is set to fill the entire browser window OR extend with content if it extend below browser window viewport area, with

 

body,html {height: 100%;}

#outer_container {min-height: 100%}

 

The footer then uses a minus top margin that is the same height of footer, this causes it to overlap the bottom edge of outer_container to bring it into view, you then add padding to content container so that the content does go under the footer.

 

It sounds like body, html or #outer_container have been amended from styling above, which causes it to revert to normal layout where the content determines height outer_container.