css3 - How to remove the space under a div that has been displayed on a calculated height -

i have div containing image calculated height enables me display part of image (100%-197px). problem text under calculated height div not appear directly under image leaves empty space.

here jsfiddle

and here code

<style> #div1 {     left: 300px;     height: calc(100% - 197px);     border: 1px solid black;     background-color: yellow;     float:left;     overflow:hidden; } #div1 img{   height:auto; } .wrap{   height:100vh; } </style>  <div class="wrap">     <div id="div1">   <img src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg">   </div>    </div>  <p>this text supposed appear right under image goes down . how solve ?</p> 

how remove space under div has been displayed on calculated height ?

you can change source ordering or change style. stood, <p> tag being pushed below <div class="wrapper"> element.

see codepen below:
http://jsfiddle.net/p8b5sb0t/4/

and code:

<div class="wrap">   <div id="div1">   <img src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg">   </div>   <p>this text supposed appear right under image goes down . how solve ?</p>   </div>