I am working on expanding a specific DIV within a series of DIVs for an image gallery. However, I am facing an issue where when I expand the particular DIV, it affects all the following ones and causes them to shift positions, leaving a large blank space that is not desired.
I have tried using various CSS properties on the specific DIVs, such as setting the height to 250px and adding a margin-bottom of 100px, but none of them have yielded the desired outcome so far.
The CSS used:
.thumb {
float: left;
margin: 5px;
}
#gallery {
width: 850px;
}
The HTML structure:
<html>
<head>
<title>asd</title>
</head>
<body>
<div id="gallery">
<div class="thumb">
<img src="https://picsum.photos/155/155?image=0">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=100">
</div>
<div class="thumb" style="height:250px;"> <!-- specific DIV to expand vertically !-->
<img src="https://picsum.photos/155/155?image=200">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=350">
</div>
// more images here
</div>
</body>
</html>
I have created a fiddle to demonstrate the issue: https://jsfiddle.net/537ayfwc/
In order to work around this issue, I have temporarily added an invisible DIV between every 5 pictures to act as a separator. However, I am looking for a solution that does not require this additional element as it may interfere with future JavaScript animations planned for the gallery.