Figure 1 - Arbitrary Image

Figure 2. This Page Content


<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/Content.css">
    <script src="js/CodeViewerComponent.js" defer></script>
    <script src="js/ImageViewerComponent.js" defer></script>
    <style>
      .stack {
        padding: 0rem; width: 100%; border: 2px solid fff;
      }
      .stack-right {
        clear: right; float: right; margin: 0 0 1rem 1rem;
      }
      .stack-left {
        clear: left; float: left; margin: 0 1rem 1rem 0;
      }
      .stack::after {
        content: "" display: block; clear: both;
      }
    </style>
    <style>
      body {
        padding: 1rem 2rem;
      }
    </style>
  </head>
  <body>
    <h2>Stacked Content</h2>
    <div class="stack">
      <div class="stack-right">
        <image-viewer img-src="pictures/HTML_DOM5.png" img-width="450" style="float:right; margin-bottom:1rem;">
          <span style="padding:0.25rem 0.5rem 0.5rem 0.5rem; margin:0rem; background-color: #ccc; width:100%; border-bottom: 1px solid var(--dark)">Figure 1a - HTML DOM</span>
        </image-viewer>
      </div>
      <div class="stack-right">
        <code-viewer style="float:right; padding:0rem 0.25rem;">
          <span slot="title" style="padding-top:0.25rem;">Figure 1. This Page Structure</span>
          <pre style="width:25rem; font-size:0.95rem;"><code class="language-term">
            -- contents elided ---
          </code></pre>
        </code-viewer>
      </div>

      --- content elided ---

  </body>
</html>

This test presents a scheme to float boxes to one side and let text flow up to a margin for each box.

Figures 1 and 2 are stacked to the right and text will flow around each based on their widths. If you click on the body of either they will grow. Clicking on the title will cause them to shrink.

If you put all stacked boxes in a single flex container with flex-direction: column then the boxes stack as desired, but the text flows to the container boundary, possibly not the boundary of the box to the right.

If, on the other hand you simply float each box to the right, they will stack only if there isn't enough room for two or more boxes. If there is, they stack horizontally until there is no more room.

This code places both text and boxes in a container, floats and clears each box, and places an empty div after the stack that clears both.

Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada. Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada. Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada. Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.