CODEWITHSUNDEEP
cssreactjsfrontend
Jason Cameron
Jason Cameron

Reputation: 17

Make a border wrap around elements following different heights?

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

I was wondering if it was possible to have a CSS border wrap around the photos at the bottom, but following the sides to account for different heights?

What it is currently: what it is currently

I was picturing something like this: desired result

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

But any attempt that I did just resulted in a border around the entire container, and not the individual photos at the bottom.

I already style the other sides with:

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

and the container's HTML is available to view here my thought was to target the last child of each react-photo-album--column I just don't know how to do the sides then.

Upvotes: 0

Views: 302

Answers (1)

paddotk
paddotk

Reputation: 1440

You could put borders around the side and bottom of the photo container divs. Then give these divs a background color that is the same of the overall background (blue), and overlapping these with the borders you want to hide. So basically:

  • Your container divs have 2rem padding
  • Each container has a higher z-index than the one to its left (to ensure overlap)
  • Each container has a blue background
  • Each container except for the first one has a margin-left of -2rem to move over the border of the container to its left

Edit: Thinking this through a little more, this will only work when a container is shorter than the previous one. You could solve this by writing a function in javascript that checks whether a container is longer or shorter than the one before and after. Based on this, you could use or not use a border at each side (by means of extra classes applied to the containers).

Upvotes: 1

Related Questions