Check out this example of HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Floats Example</title>
<style type="text/css">
.left {
float:left;
width:100px;
}
.right {
float:right;
width:400px;
}
body {
width:500px;
}
div {
outline:solid red 1px;
padding-bottom:20px;
}
.blue {
outline-color:blue
}
.green {
outline-color:green;
height:20px;
}
</style>
</head>
<body>
<div class="left green"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="left blue"></div>
</body>
</html>
The green box represents an image with varying heights. The red boxes symbolize blocks that form the article. The blue box contains related information.
I am seeking a solution to position the blue box directly after the green box, eliminating the space caused by the red boxes, while still maintaining the placement of the blue box at the end in the HTML structure.