Create borders around elements of different heights

Question

I'm using react-photo-album to create a photo album on my website.

I was wondering if it was possible to set a CSS border around the photo at the bottom, but follow the sides to account for the different heights?

What is currently:

I'm imagining something like this:

I was able to get it using :last-child on the react-photo-album--column class:

But anything I try just results in a border around the entire container, rather than the single photo at the bottom.

I've styled the other side:

.react-photo-album {
    border-radius: 5px;
    border: 4px solid #86afe1;
    border-bottom: 0;
    padding: 3rem 2rem 2rem;
}

And the HTML of the container can be viewed here, my idea is to target the last child of each React-photo-album--column, I just don't know how to handle the sides.

Answer 1

You can place borders on the sides and bottom of the photo container div. Then give these divs the same background color as the overall background (blue) and overlap them with the border you want to hide. So basically:

• Your container div has 2rem padding
• Each container has a higher z-index than the container to its left (to ensure overlap)
• Each container has a blue background
• With the exception of the first container, the left margin of each container is -2rem to move across the container's border to its left side

edit: Thinking about it again, this only works if the container is shorter than the previous container. You can solve this problem by writing a function in javascript that checks if the container is longer or shorter than the preceding and following containers. Based on this you can use or not use borders on each side (via extra classes applied to the container).