<!doctype html>

 <style>

	#green-box1 {
       width:100px;
	   height:150px;
	   margin-left:52px;
       margin-right:50px;
    }

	#grey-box1 {
	   width:160px;
       height:122px;
	   margin-top:30px;
	   margin-left:20px;
       margin-right:20px;
	}

   #green-box2 {
	   width:150px;
	   height:180px;
	   margin-left:62px;
	   margin-right:85px;
  }

   #grey-box2 {
	   width:240px;
	   height:180px;
	   margin-left:30px;
	   margin-right:30px;
   }

   #green-box3 {
	   width:60px;
	   height:120px;
	   margin-left:44px;
	   margin-right:15px;
   }

   #grey-box3 {
	   width:96px;
	   height:50px;
	   margin-left:12px;
	   margin-right:11px;
   }

   #green-box1, #green-box2, #green-box3 {
       background-color: #00a000;
       position:absolute;	
   }
  
   #grey-box1, #grey-box2, #grey-box3 {
       background-color: #cccccc;
       position:absolute;	
       z-index:-1;
   }
  
 
    #region1, #region2, #region3 {
        border: 1px solid black;
    }

    #region1 {
	
	    width: 200px;
        height: 150px;
	}
    
    #region2 {
        width: 300px;
        height: 180px;
    }
    
    #region3 {
        width: 120px;
        height: 120px;
    }
</style>

<body>
<p>The green positioned object should go through all three regions. Its left edge should have the
same offset from the left side of the light grey boxes in each region.</p>


    <div id="region1">
       <div id="green-box1"></div>	
       <div id="grey-box1"></div>
    </div>
    <div id="region2">
       <div id="green-box2"></div>
	   <div id="grey-box2"></div>
    </div>
    <div id="region3">
    	<div id="green-box3"><br></div>
		<div id="grey-box3"></div>
    </div>