title: JavaScript: Can I skip the complex re-sizing of a div to get the "full width block, no vertical overlap" behavior I want?
body: <p>I'm asking this because there may be a much simpler way to do what I'd like to do, but I don't know enough to ask the right question about particular components.</p>
  
  <p>What I want seems simple enough: I have a series of <code>divs</code> that are sequentially adjacent (next rows in the file) in an HTML file and I want to use the <code>insertHTML</code> capability to plunk an image and some related text into each of the <code>divs</code>. The <code>divs</code> should be full width of the current browser window, and I'd like the vertical size dynamically adjust with content such that there's no overflow above or below the <code>div</code>. And, no vertically wasted space to speak of.</p>
  
  <p>I thought this could be done in a simple manner and have been proven wrong, but the most simple thing I found that worked was to vertically re-size the <code>divs</code> in the code that also runs <code>insertHTML()</code>. My code is <a href="https://stackoverflow.com/questions/52268906/resize-of-div-is-being-ignored#52268970">already posted here,</a> when I asked why that resizing wasn't working. (And the answer was that the example I'd followed didn't specify units, so neither did I, but as soon as it got units, it worked.)</p>
  
  <p>The only part of the code not presented there that may be pertinent is this bit, the code that's inserted into the <code>divs</code> via <code>insertHTML</code>:</p>
  
  <pre><code>html = '&lt;hr&gt;&lt;a href="'+link+'"&gt;&lt;img src="'+image+'" width="60%" align="right"&gt;&lt;/img&gt;&lt;h1&gt;'+title+'&lt;/h1&gt;&lt;/a&gt;'+summary;
  target.style.height = height+"px";
  target.innerHTML = html;
  </code></pre>
  
  <p>OK, so I now have something that's SOMETIMES pretty good, but the vertical height comes from the original height of the image, but that's sometimes not the real height because I'll need to re-size big images to 60% of display width in order to keep the formatting sane. Meanwhile, the text also sometimes overflows the height of the image, so even if I knew the actual height of the image - I presume I get this via a function called via an "<code>onLoad</code>" directive in the <code>&lt;img&gt;</code> tag - that's not always enough.</p>
  
  <p>So, even if I have the image size after loading, I still don't know the ultimate size the <code>div</code> should be set to due to the text.</p>
  
  <p>In my long carrier I have found that if the solution seems complicated, it's safe to presume "I'm just doing it wrong." What's the correct way?</p>
  
  <p>If this IS the correct way, then, what are the best steps to complete this more complex method? For example, is there a way to get the "preferred" size of the div, including image and text? Is there a way to get the actual height of the current image in the code that did the insertHTML (I presume not since the image hasn't loaded yet)? Or, what else am I not considering?</p>