css design changes device to device

Question

I have developed game like match the following using jquery animate function.Its working perfectly what i expected.Here is my game http://jsfiddle.net/Manivasagam/z4aLva34/40/. My problem is, when i run this game in my system its working fine like below image,

But when i run in other system, its alignment automatically changing(maked in black) like below image,

css what i am using,

#main{ width: 800px; border: 1px solid #f00}

#first {

    float:left; /* add this */

    height: 350px;
     padding-left: 0px;
}
#second {
    text-align:left;
   float:right;
     height: 350px;
}

.dropzone {

margin: 5px;
padding: 10px!important;
border: 2px dashed #f0ad4e;
border-radius: 5px;
background-color: #eeeeee;
z-index: 50;
float: left;
text-align: center;

list-style:none;
}


 .item {

    margin: 5px;
    padding: 10px!important;
    border: 2px solid #5bc0de;
    border-radius: 5px;
    background-color: #eeeeee;
    z-index: 9999;
    float: left;
    text-align: center;
    list-style:none;
    }

    label, span { position: relative; }

jsp:

<div  id="main" align="center">
<div id="first" class="nav nav-justified">      
     <label id="Cat" class="dropzone">Cat</label><br><br><br>
     <label id="Snake" class="dropzone">Snake</label><br><br><br>
     <label id="Cow" class="dropzone">Cow</label><br><br><br>
     <label id="Afor" class="dropzone">A for</label><br><br><br>

     <label id="Cfor" class="dropzone">C for</label><br><br><br>

 </div>
    <div id="second">
        <label id="Cow" class="item"  name="Milk">Milk</label><br><br><br>        
         <label id="Cat" class="item"  name="Rat">Rat</label><br><br><br>  
          <label id="Snake" class="item"  name="Eagle">Eagle</label><br><br><br> 

               <label id="Cfor" class="item"  name="Cherry">Cherry</label><br><br><br> 
                   <label id="Afor" class="item"  name="Apple">Apple</label><br><br><br> 
 </div>
   </div>  

How to fix this problem?

Answer 1

Working Demo on Jsfiddle

$(function(){
var count=0;
	 var click=0;
	 var i=1;
	$('#textid').val('');
	$('#textid2').val('');
	//$('.item').prop('disabled','disabled');
	
$('#successMessage').hide();
$("#errorMessage").hide();

$('.dropzone').attr('Disabled',false);
$('.item').attr('Disabled',false);

$('.dropzone').click(function(){
	var x,y;
	var Ans = $(this).attr('id');
  
	$(this).animate({left:"250px"},"slow" );

	//$(this).effect("highlight", {});
	//$(this).blink();
	
	  T  = $("#"+Ans).offset().top;
	  L = $("#"+Ans).offset().left; 
	 // alert('x :'+T+'\n'+'y :'+L);
	//var lname = $(this).attr('name');
	$('#textid').val(Ans);
	var textval=$('#textid2').val();
	//alert(textval);
	//$('#textid2').val(lname);
	
	if(textval!=""){
		//alert(Ans+'\n'+'#'+textval);
		$('#'+textval).animate({left:"0px"},"slow" );
		
		}
	$('#textid2').val(Ans);
	
	//alert('#'+Ans);
	//$('label[name='+lname+']').animate({right:"200px"},"slow" );
	//alert(Ans);

	
});

$('.item').click(function(){
	
	var Ques =$(this).attr('id');

	var lname = $(this).attr('name');
	$(this).animate({right:'250px'});
	var Ans =$('#textid').val();
	var text2 =$('#textid2').val();

	if(text2=="")
	  {
		 
		  $(this).animate({right:"0px"});
	  }
	 
	//alert(lname);
	 var T  = $("#"+Ans).offset().top;
	 var L = $("#"+Ans).offset().left;  
	 // alert('x :'+T+'\n'+'y :'+L);
	
	  
	 
	//alert('label name :'+lname);
	if(Ques==Ans)
	{
       //alert("matched");
       M  = $(this).offset().top;
      N = $(this).offset().left;
      M-=T;
      N-=L+120;
     
     //alert(M+"\n"+N);
      $(this).animate({bottom:M+'px'});
      $(this).animate({right:N+'px'});

      var isimagecheck=$('#imageyestext').val();
     // alert(isimagecheck);

       if(i==1){

          
			
			$("#"+Ans).css({'background-color':'red','color':'white'});
			if(isimagecheck=="no"){
			$('input[name='+lname+']').css({'background-color':'red','color':'white'});
			}
			else
			{
				$(this).css({'background-color':'red','color':'white'});
			}
			}

			else if(i==2){
				
			$("#"+Ans).css({'background-color':'green','color':'white'});
			
			if(isimagecheck=="no"){
				$('input[name='+lname+']').css({'background-color':'green','color':'white'});
				}
				else
				{
					$(this).css({'background-color':'green','color':'white'});
				}
			}
			else if(i==3){
				
				$("#"+Ans).css({'background-color':'yellow','color':'black'});
				if(isimagecheck=="no"){
					$('input[name='+lname+']').css({'background-color':'yellow','color':'black'});
					}
					else
					{
						$(this).css({'background-color':'yellow','color':'white'});
					}
				}
			else if(i==4){
				
				$("#"+Ans).css({'background-color':'gray','color':'white'});
				
				if(isimagecheck=="no"){
					$('input[name='+lname+']').css({'background-color':'gray','color':'white'});
					}
					else
					{
						$(this).css({'background-color':'gray','color':'white'});
					}
				}
			else if(i==5){
				
				$("#"+Ans).css({'background-color':'pink','color':'white'});
				
				if(isimagecheck=="no"){
					$('input[name='+lname+']').css({'background-color':'pink','color':'white'});
					}
					else
					{
						$(this).css({'background-color':'pink','color':'white'});
					}
				}
else if(i==6){
				
				$("#"+Ans).css({'background-color':'#339933','color':'white'});
				
				if(isimagecheck=="no"){
					$('input[name='+lname+']').css({'background-color':'#339933','color':'white'});
					}
					else
					{
						$(this).css({'background-color':'#339933','color':'white'});
					}
				}
else if(i==7){
	
	$("#"+Ans).css({'background-color':'pink','#666633':'white'});
	
	if(isimagecheck=="no"){
		$('input[name='+lname+']').css({'background-color':'#666633','color':'white'});
		}
		else
		{
			$(this).css({'background-color':'#666633','color':'white'});
		}
	}
else if(i==8){
	
	$("#"+Ans).css({'background-color':'pink','#CC9900':'white'});
	if(isimagecheck=="no"){
		$('input[name='+lname+']').css({'background-color':'#CC9900','color':'white'});
		}
		else
		{
			$(this).css({'background-color':'#CC9900','color':'white'});
		}
	}

       $('input[name='+lname+']').prop('disabled',true);
      	$("#"+Ans).attr('disabled',true);
    	$(this).attr('disabled',true);

      	$('#textid2').val('');
      	$('#textid').val('');
       count++;
		i++;
        
		

       
	}
	else
	{
		$("#" + Ans).animate({left:"0px"});
        $(this).animate({right:"0px"});
        $('#textid2').val('');
        $('#textid').val('');
        click++;
        
	}

	function successMessagestyle()
	{
		$('#successMessage').animate( {
		      left: '550px',
		      top: '180px',
		      width: '400px',
		      height: '110px',
		      opacity: 1
		    } );
	}

	function errorMessagestyle()
	{
		$('#errorMessage').animate( {
		      left: '815px',
		      top: '180px',
		      width: '350px',
		      height: '110px',
		      opacity: 1
		    
		    } );
	}

	if(count==5)
	{
		$("#successMessage").show();
		$("#successbuttonid").blink();
		$("#successbuttonid").css({'color':'green'});
		successMessagestyle();
	}

	if(click==6)
	{
		$("#errorMessage").show();
		$("#errorbuttonid").blink();
		$("#errorbuttonid").css({'color':'red'});
		errorMessagestyle();
		$('.item').attr('disabled', true);
		$('.dropzone').attr('disabled', true);

	}


	
});





});

function PlayAgain()
{

	$("#errorMessage").hide();
	
	location.reload(true);

}





//blink jquery plugin


(function($)
{
	$.fn.blink = function(options)
	{
		var defaults = { delay:500 };
		var options = $.extend(defaults, options);
		
		return this.each(function()
		{
			var obj = $(this);
			setInterval(function()
			{
				if($(obj).css("visibility") == "visible")
				{
					$(obj).css('visibility','hidden');
				}
				else
				{
					$(obj).css('visibility','visible');
				}
			}, options.delay);
		});
	}
}(jQuery))

*{box-zizing: border-box; padding: 0; margin: 0}

.dropzone {
    z-index: 50;
    border: 2px dashed #f0ad4e;
}
.item {
    z-index: 9999;
    border: 2px solid #5bc0de;
}

label, span { 
    position: relative;
}
label{
    display: block;
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    background-color: #eeeeee;
    text-align: center;
    list-style:none;
}
#main{ width: 800px; border: 1px solid #f00; position: relative}
#first,#second{height: 350px;}
#first {
    float:left; /* add this */
    padding-left: 0px;
}
#second {
    text-align:left;
    float:right;
}


#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  border-radius: 10px;
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

#errorMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  border-radius: 10px;
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div  id="main" align="center">
<div id="first" class="nav nav-justified">		
     <label id="Cat" class="dropzone">Cat</label>
     <label id="Snake" class="dropzone">Snake</label>
     <label id="Cow" class="dropzone">Cow</label>
     <label id="Afor" class="dropzone">A for</label>

     <label id="Cfor" class="dropzone">C for</label> 

 </div>
    <div id="second">
        <label id="Cow" class="item"  name="Milk">Milk</label>         
         <label id="Cat" class="item"  name="Rat">Rat</label> 
          <label id="Snake" class="item"  name="Eagle">Eagle</label> 
    
               <label id="Cfor" class="item"  name="Cherry">Cherry</label>  
                   <label id="Afor" class="item"  name="Apple">Apple</label>  
 </div>
   </div>                              
       
<input type="hidden" id="textid" value="" >
<input type="hidden" id="textid2" value="">  
    
    
      <div id="successMessage" align="center">
    <h2 id="successbuttonid">You did it!</h2>
    <button id="" onclick="PlayAgain()">Play Again</button>
  </div>

<div id="errorMessage" align="center">
    <h2 id="errorbuttonid">Sorry! You Lost! You cliked 6 times wrong answer</h2>
    <button id="" onclick="PlayAgain()">Play Again</button>
  </div>

Answer 2

Its problem is on Firefox. Your AFor div has a problem.

<label disabled="disabled" style="background-color: yellow; color: white; bottom: 57.6px; right: 351.6px;" id="Afor" class="item" name="Apple">Apple</label>

When I remove and add again right position, it will work good. So, you can update your CSS via jQuery.