How to expand a DIV vertically without affecting other DIVs around?

Question

I'm trying to expand a DIV in a set of given DIVs for an image gallery, the issue I get is when I expend the specific DIV all the next ones get affected and move their positions which lets a big blank space that I don't want.

I tried the following CSS properties on the specific DIVs and none of them worked out so far :

height: 250px;
margin-bottom: 100px;

The css :

.thumb{
  float:left;
  margin:5px;
}

#gallery{
  width:850px;
}

The html :

<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>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=400">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=500">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=600">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=700">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=800">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=900">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=950">
            </div>
            <div class="thumb">
                <img src="https://picsum.photos/155/155?image=990">
            </div>
        </div>
    </body>
</html>

The result I'm getting :

The end result I want :

I made the fiddle so you can better see what's happening : https://jsfiddle.net/537ayfwc/

I found a workaround by adding an invisible DIV that would act as a seperating line after every 5 pics but I'm trying to find a way to do without it as it adds more constraints to the future javascript animations I would like to perform on the whole gallery.

Please include your code in the question itself rather than linking only to a JSFiddle. — TylerH, Dec 13 '18 at 20:18

score 1 · Accepted Answer · answered Dec 13 '18 at 20:25

1

Not sure if this is what you're looking for.

.thumb{
  float:left;
  margin:5px;
}

#gallery{
  width:850px;
  display: flex;
  flex-wrap: wrap;
}

answered Dec 13 '18 at 20:25

donpsabance

358
3
9

1

float become useless here – Temani Afif Dec 13 '18 at 20:28
@tcj I think this [guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) will be of use also – donpsabance Dec 13 '18 at 20:33
@donpsabance I also tried few things with flexbox but I gave up thinking it will not resolve my issue, thanks, I'll definitely look back on the flexbox documentation – tcj Dec 13 '18 at 20:38

How to expand a DIV vertically without affecting other DIVs around?

1 Answers1