Fool Proof Responsive Design Solution

Using javascript and simple math, without using percentage based properties you can load the same basic layout at whatever screen size the user is browsing in.

This you can do with absolute positioning using px.

Below is the basic algorithm. You set a target screen size and then readjust the position based on the percent difference between that and the user's screen size.

var Layout = function(){
  this.targetX=960;
  this.targetY=527;
  this.resultX=0;
  this.resultY=0;
  this.compute= function(x,y){
    var reX = x-this.targetX;
    var reY = y-this.targetY;
    var teX = reX+this.targetX;
    var teY = reY+this.targetY;
    this.resultX=teX/this.targetX;

  };
};

var layout = new Layout;
layout.compute(winWidth,winHeight);

Below are the elements coordinates that correspond with your target width/height.

var mapXOne =   [430,540,620
          ];

var mapYOne =   [200,200,200

          ];

Now reset the x and y coordinates.

for(var i=0;i<mapXOne.length;i++){
  mapXOne[i]= mapXOne[i]*layout.resultX;
}
for(var i=0;i<mapYOne.length;i++){
  mapYOne[i]= mapYOne[i]*layout.resultY;
}

Finally you can apply these coordinates to the elements.