/* CSS */
#layer0 {
  background: red;
  width: 200px;
  height: 460px;
}
 
#Layer1 {
  position:relative;
  top: 100%;
  width:136px;
  height:177px;
  margin-top: -177px;
  z-index:1;
  background: blue;
}

<!-- HTML -->
<div id="layer0">
  <div id="Layer1"></div>
</div>

/* CSS */
#titDiv {
  background: green;
  padding: 10px;
}
 
#titDiv p {
  float: left;
}
 
#layer0 {
  float: right;
  background: #fff;
  height: 460px;
}
 
#layer1 {
  position:relative;
  top: 100%;
  margin-top: -35px;
  width:630px;
  height:35px;
  z-index:1;
  background: blue;
}
 
/* easy clearing */
 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
.clearfix { display: inline-table; }
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<!-- HTML -->
<div id="titDiv" class="clearfix">
  <p>div #titDiv</p>
  <div id="layer0">
    <p>div #layer0</p>
    <div id="layer1">
      <img src="" />
    </div>
  </div>
</div>