Imagine you have a website structured like this.
#left_column {
width: 200px;
}
<div id="left_column">
/* some content */
</div>
<div id="right_column">
/* A series of photos each with a width of 100px and floated */
</div>
In this setup, the site consists of a left column measuring 200 pixels wide and a right column meant to display multiple images. Depending on the screen size, the right column may display 7 images per row, 10 images, or more. Additionally, there will often be empty space to the right of each row due to the screen width not being divisible by 100.
The goal is for the right_column to adjust its width based on the total width of the images in each row, ensuring it does not exceed the border of the rightmost image. Essentially, the width of the right_column should match the combined widths of the images displayed in each row.