CSS Div place images of different size

HTML & CSS
1

Hello,

I have a question regarding placing images.

This is a quick mark-up of what i would like to accomplish:

Is this possible without using absolute positioning?

I’ve placed all images in a separate div but i can’t get it to work.
It looks like this:

Thanks!

2

Honestly then you are either going to have to resort to JS for this, or stick with fixed widths.

It’s extremely awkward as it is right now to give you what you want with just fixed widths, unless you do the column route (that’s what I first thought of when I read this thread)

Absolute positioning is extremely fragile and I’d shy away from it

Javascript is a bit overkill and I’d just stick to fixed widths for this

3

make columns of those width, then place the images in them. that should do.

<div style="width:150px;float:left;">
   <img..../>
   <img..../>
</div>
<div style="width:150px;float:left;">
   <img..../>
   <img..../>
</div>
<div style="width:150px;float:left;">
   <img..../>
   <img..../>
</div>
<div style="width:150px;float:left;">
   <img..../>
   <img..../>
</div>
4

Okay that would do the job it all widths are the same! :stuck_out_tongue:

But what if i want different widths?