Per the following screenshot, I have two <div> elements, each containing tables, with those <div> placed adjacent to one another. Additionally, the <body> content is placed below those <div>.
How can I wrap the left table under the right one, if the there is unused space under the right table?
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjacent table wrapping</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 0.0rem 0.25rem 0.0rem 0.5rem;
}
table tr:nth-child(odd) { background-color: #edf0f0; }
#left_div {
float: left;
wrap:inline;
width: 60%;
}
#left_div table td:first-child {
}
#right_div {
float: right;
clear: right;
width: 39%;
}
/* Without the following, "clear: left;", if there was space between the
* "left_div" and the "right_div", then the body text was wrapping between
* those adjacent (float {left | right}) <div>. The solution, per
* https://stackoverflow.com/questions/3258944/how-can-stop-text-wrapping-around-some-floated-divs
* was to add
* <div id="clear_left"></div>
* which enables text to both flow below the "left_div", and also to the left
* of the "right_div".
*/
#clear_left {
clear: left;
}
</style>
</head>
<body>
<!-- LEFT DIV -->
<div id="left_div">
<table>
<tr>
<td>URL</td>
<td>example.com</td>
</tr>
<tr>
<td>Source</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td>Year</td>
<td>2021</td>
</tr>
<tr>
<td>Modified</td>
<td>July 01, 2021</td>
</tr>
<tr>
<td>Comment</td>
<td> Suspendisse efficitur pulvinar elementum.</td>
</tr>
<tr>
<td>Key points</td>
<td>
<ul>
<li class="body">Vestibulum a est eu erat rutrum scelerisque non et diam.</li>
<li class="body">Nam ut fringilla enim.</li>
</ul>
</td>
</tr>
<tr>
<td>Notes</td>
<td>Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque.</td>
</tr>
<tr>
<td>More notes</td>
<td>Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</td>
</tr>
<tr>
<meta name="summary" content="" />
<td>Summary</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</td>
</tr>
</table>
</div>
<!-- RIGHT DIV -->
<div id="right_div">
<table>
<tr>
<td colspan="2">
<b><center>Flag of Canada</center></b>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_%28Pantone%29.svg/1280px-Flag_of_Canada_%28Pantone%29.svg.png" alt="Flag of Canada" width="400"/>
</td>
</tr>
</table>
</div>
<!-- Prevent <body> content between "left_div" and "right_div": -->
<div id="clear_left"></div>
<!-- ---------------------------------------------------------------------- -->
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam. Nam ut fringilla enim. Pellentesque finibus mauris vel nulla euismod mollis. Nunc sit amet euismod purus, ut viverra neque. Quisque eget ante efficitur, dignissim felis nec, tempor dolor. Curabitur elementum dui et odio pharetra varius. Phasellus molestie ullamcorper nulla. Morbi finibus nisi a consequat mollis. Etiam in sagittis sapien, sit amet commodo augue.</p>
</body>
