CSS Issue I think- image galleries lining up

[Edrol97]

Can anyone help with this? I'm still struggling. Code below for reference. I'm not sure if one of the images being a GIF makes a difference. I don't think it should make a difference but just including it in case it is.

@font-face {
    font-family: Eliot Lord;
    src: url(Fonts/EliotlordhandRegular.ttf);
}
body {
    font-family: Eliot Lord;
}
.h1{
    font-size: 60pt;
}
.container {
    cursor: pointer;
    height: 100%;
    width: 100%;
  position: relative;
}
.galleries {
    overflow: hidden;
  position: relative;
}
.gallery1,
.gallery2,
.gallery3,
.gallery4,
.gallery5,
.gallery6,
.gallery7,
.gallery8,
.gallery9 {
    float: left;
}
.title_text {
    font-size: 44pt;
    font-weight: bold;
}
.caption_text {
    font-size: 25pt;
  height: 100%;
    width: 100%;
}
.slide-show_containers {
    margin-top: 50px;
    width: 100%;
  height: 500px;
}
.slide-show_1container,
.slide-show_2container,
.slide-show_3container,
.slide-show_4container,
.slide-show_5container,
.slide-show_6container,
.slide-show_7container,
.slide-show_8container,
.slide-show_9container{
    display: none;
  position: relative;
  margin: auto;
  height: 600px;
}
.image_slide1,
.image_slide2,
.image_slide3,
.image_slide4,
.image_slide5,
.image_slide6,
.image_slide7,
.image_slide8,
.image_slide9 {
    height: 100%;
    width: 600px;
    overflow: hidden;
  display: none;
  margin: auto;
  text-align: center;
}
.previous_button,
.next_button,
.close_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    align-items: center;
    cursor: pointer;
    font-size: xx-large;
  position: absolute;
}
.previous_button {
    top: 50%;
    left: 10px;
}
.next_button {
    top: 50%;
    right: 10px;
}
.close_button {
    top: 10px;
    right: 10px;
}

 

[tomliv]

Here is what I am seeing:

https://cln.sh/nbtxt8M7fDW76mCrY7yv

without full paths to images, we have the empty squares. That aside, I'm not sure what's not working.

 

[Johna]

The CSS columns property might be what you're looking for. Use it on the .galleries element, rather than using float: left; on the child elements.

Setting columns: 300px auto; gets this result (with different height images). I'm not sure if this is what you're trying to get?

 

[Edrol97]

The CSS columns property might be what you're looking for. Use it on the .galleries element, rather than using float: left; on the child elements.

Setting columns: 300px auto; gets this result (with different height images). I'm not sure if this is what you're trying to get?
View attachment 2611

Hi John, I didn't have to specify columns previously and it just added the images in rows. I don't want the images so strictly aligned to this rigid a format necessarily. I've tried this and get this result- it seems to split in the middle quite obviously which I don't think I want

 

[Johna]

I'm not sure it's possible to have the images not aligned some sort of way, either vertically or horizontally. Unless you want to use absolute or relative positioning and explicitly define where the images should be.

Setting the image and image container widths to 100% will make the images automatically take the maximum amount of space in the column. That should remove the gap in the middle.

I didn't have to specify columns previously and it just added the images in rows.

Can you show a screenshot of how you had it previously?

 

[Edrol97]

I'm not sure it's possible to have the images not aligned some sort of way, either vertically or horizontally. Unless you want to use absolute or relative positioning and explicitly define where the images should be.

Setting the image and image container widths to 100% will make the images automatically take the maximum amount of space in the column. That should remove the gap in the middle.


Can you show a screenshot of how you had it previously?

I annoyingly don't

 

[tomliv]

CSS grid could also be a possibility as well. Flex could work too.

Flex idea:

.parent{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.parent img{
flex: 0 0 200px;
}

adjust as desired.

 

[Edrol97]

I'm not sure it's possible to have the images not aligned some sort of way, either vertically or horizontally. Unless you want to use absolute or relative positioning and explicitly define where the images should be.

Setting the image and image container widths to 100% will make the images automatically take the maximum amount of space in the column. That should remove the gap in the middle.


Can you show a screenshot of how you had it previously?

CSS grid could also be a possibility as well. Flex could work too.

Flex idea:

.parent{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}
.parent img{
flex: 0 0 200px;
}

adjust as desired.

Much better!