0

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.

What I want seems simple enough: I have a series of divs that are sequentially adjacent (next rows in the file) in an HTML file and I want to use the insertHTML capability to plunk an image and some related text into each of the divs. The divs 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 div. And, no vertically wasted space to speak of.

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 divs in the code that also runs insertHTML(). My code is already posted here, 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.)

The only part of the code not presented there that may be pertinent is this bit, the code that's inserted into the divs via insertHTML:

html = '<hr><a href="'+link+'"><img src="'+image+'" width="60%" align="right"></img><h1>'+title+'</h1></a>'+summary;
target.style.height = height+"px";
target.innerHTML = html;

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 "onLoad" directive in the <img> tag - that's not always enough.

So, even if I have the image size after loading, I still don't know the ultimate size the div should be set to due to the text.

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?

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?

Richard T
  • 4,570
  • 5
  • 37
  • 49
  • Add `overflow: auto;` to your divs, that'll increase the height to include floating elements: https://jsfiddle.net/khrismuc/L4es8bf7/ –  Sep 11 '18 at 19:08
  • @ChrisG HOLLYSMOKES! That worked! YES, I was doing it wrong. . . If you make this an answer, I'll credit it as correct! THANK YOU. You have no idea how much time I spent "doing it wrong!" – Richard T Sep 11 '18 at 19:22

1 Answers1

0

And the answer was...

...YES, I was doing it wrong!

I had overlooked the CSS feature of div called overflow: auto; Adding this and it suddenly worked!

So, the code for the divs now looks like this:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.mydivs { display:block; width:100%; margin:auto; overflow:auto; }
</style>

</head>
<body bgcolor="#E3FBFF" text="#000000" onload="loadImages();">
<script type = "text/javascript">
function loadImages()
{
  // ...Function omitted for brevity...
  // But it gets to this line where html
  // contains the <img src> tag, etc, and
  // target is already pointed at my div
  // object:
  target.innerHTML = html;
}
</script>
<div id=d0 class="mydivs"></div>
<hr>
<div id=d1 class="mydivs"></div>
<hr>
<div id=d2 class="mydivs"></div>
<hr>
<div id=d3 class="mydivs"></div>
<hr>
</body>
</html>

Simple!

Richard T
  • 4,570
  • 5
  • 37
  • 49