Questions in the title really, but what im getting @ in my site is if you (using normal to large screen size) click the Tunes or Images Tab, youll notice the footer is way off the bottom of the screen. Where as in the other tabs, it stays @ the bottom (where it should be). I know this is due to the amount of content within the container. But is there a css trick or something more simplistic that Forces all tabs to display the same?. I mean the footer staying @ the bottom, where it bleeding well should be :-)?

 

Thanks

{update} working on a solution. Will post soon.

{update} working on a solution. Will post soon.

Still looking for a solution. Did think may of found it @ stackoverflow But this only make the footer overlap & cover the content.

 

Advice welcome.

 

Thanks

 

[just thinking as i write this. 'overlap'!!!. isnt there some css code to stop overlap? memory thinks so ]

It's late at night, so this may not be 100% correct, so bare with me…

 

First, in your CSS, add this;

 

html {
   
    min-height:100%

}
 

This will set the site to stretch to the bottom of the browser window.

 

Then, we need to specify a height for the footer, rather than keeping it at auto. Add this to the CSS that deals with your footer…

 

#footer {

     height:100px;
     position:absolute;
     bottom:0;
}
 

This just tells the browser "place the very bottom of this div at the very bottom of the browser window".

 

Those additions should stretch the page to the bottom of the page and force the footer to stay at the bottom of the browser viewport. Let me know if it works or not.

 

With regards to "overlap", you could be thinking of clear:both, which will force a div to sit beneath preceding divs that have been floated. Or, you could have been thinking of overflow:hidden, which prevent elements from extending outside their parent.

Edited April 28, 201412 yr by Paul Murray

It's late at night, so this may not be 100% correct, so bare with me…

 

First, in your CSS, add this;

 

html {
   
    min-height:100%

}
 

This will set the site to stretch to the bottom of the browser window.

 

Then, we need to specify a height for the footer, rather than keeping it at auto. Add this to the CSS that deals with your footer…

 

#footer {

     height:100px;
     position:absolute;
     bottom:0;
}
 

This just tells the browser "place the very bottom of this div at the very bottom of the browser window".

 

Those additions should stretch the page to the bottom of the page and force the footer to stay at the bottom of the browser viewport. Let me know if it works or not.

 

With regards to "overlap", you could be thinking of clear:both, which will force a div to sit beneath preceding divs that have been floated. Or, you could have been thinking of overflow:hidden, which prevent elements from extending outside their parent.

Thanks Paul. It kind of works. Just causes the content in the section tabs to crash into the footer. the footer being transparent shows through, but not exactly what i envisaged. I think where getting there, but maybe need to find a way of keeping the section content 'Above' the footer.

 

Ill keep tinkering see where i can take it. Was going to look @ Matt James's idea

still trying to work it out. any ideas?

 

http://iammickwhite.co.uk/

sorted