0

I am having a strange div-layout problem. I have a footer div .The footer works properly in mozilla, bit in IE 7 and 8, it comes up inside the primary-content layout.

Find the screen shot below : enter image description here

I have seen all the usual solutions by googling them out, yet nothing worked.

Can some one suggest how to solve this weird problem ?

EDIT : I am employing div-collision-detection here like this :

//Detecting div collision
var class1 = '';
var class2 = '';
//primary
var cTop = jQuery('#primary').offset().top;
var cLeft = jQuery('#primary').offset().top;
var cBottom = jQuery("#primary").offset().top + jQuery("#primary").height();
var cRight = jQuery("#primary").offset().left + jQuery("#primary").width();
var cHeight = jQuery("#primary").height();
//myFooter
var fTop = jQuery('#myFooter').offset().top;
var fLeft = jQuery('#myFooter').offset().top;
var fBottom = jQuery("#myFooter").offset().top + jQuery("#myFooter").height();
var fRight = jQuery("#myFooter").offset().left + jQuery("#myFooter").width();
var fHeight = jQuery("#myFooter").height();

var divs = [
{class1:'#primary', top:cTop,   left:cLeft,   height:cHeight},
{class2:'#myFooter', top:fTop,  left:fLeft,  height:fHeight}
];
for (var i=0; i < divs.length - 1; i++)
for (var j=i+1; j < divs.length; j++)
{
var I=divs[i];
var J=divs[j];

if ( (I.top <= J.top && (I.top + I.height) >= J.top) ||
(J.top <= I.top && (J.top + J.height) >= I.top) ){
alert(I.class1 + " collides with " + J.class2);
//What to do here ??
}
}

What i don't understand is : how do i push the footer down after i detect the collision ?

The Dark Knight
  • 5,455
  • 11
  • 54
  • 95
  • This soooo has something to do with the CSS position and margin properties.. If you don't share any code however, all we can do here is guessing. Please share some code here or make a [jsfiddle](http://jsfiddle.net/). – webketje Jun 03 '13 at 14:02
  • @Tyblitz : The connection was down, so was not able to edit the code before. I know the importance of adding code here ! Do find my edited question up above . – The Dark Knight Jun 03 '13 at 14:06
  • 1
    Mmh don't have time to figure this out completely (and why would header and footer collide? I can't conceive that in a normal webpage, app maybe). Here is a post that may help you out http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection .. But if all you want is the contents not to overlap, that can be done easily with CSS. In that case no need for a JS beast... NB: you can use `$` instead of `jQuery` – webketje Jun 03 '13 at 14:21
  • I agree with @Tyblitz, why are you using Javascript for a task that seemingly can be easily done with CSS. – Paul van den Dool Jun 03 '13 at 14:47

0 Answers0