How can I create a border that wraps around elements of varying heights?

Utilizing react-photo-album to showcase a photo album on my website has been a great addition.

I've been contemplating the possibility of incorporating a CSS border that wraps around the photos at the bottom, adjusting based on their individual heights. Is this achievable?

The current display can be seen here: https://i.sstatic.net/juYm5.jpg

I envision something similar to this layout: https://i.sstatic.net/kx0vv.jpg

My attempt so far involved using :last-child on the react-photo-album--column class and resulted in: https://i.sstatic.net/S2I2n.jpg

However, all my efforts only led to having a border surrounding the entire container rather than the individual photos at the bottom.

I have already styled the other sides with:

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

The HTML structure of the container can be viewed here. My intention was to target the last child of each react-photo-album--column but I am unsure how to approach styling the sides accordingly.

cssreactjsfrontend

Answer №1

To create a visually appealing effect, consider adding borders around the sides and bottom of the photo container divs. Give these divs a background color that matches the overall background (blue) and strategically overlap them with the borders to conceal them. Here's how you can achieve this:

  • Apply 2rem padding to your container divs
  • Ensure each container has a higher z-index than the one to its left for proper overlap
  • Assign a blue background to each container
  • Add a margin-left of -2rem to each container, excluding the first one, to shift it over the border of the preceding container

Edit: Upon further consideration, keep in mind that this method may only work effectively if a container is shorter than the previous one. To address this issue, you could implement a JavaScript function to determine the height differences between containers and adjust the borders accordingly by applying additional classes to the containers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to pass selected rows from Material-Table in React.js to another page

Is there a way to redirect to another page while passing selected row data as a prop? I am using material-table and I need to transfer the selected rows data to another page upon clicking the "Export" button, so that I can utilize the data in generating a ...

javascriptreactjsmaterial-uimaterial-table

Conceal the Ajax Div and display the Loader Div while waiting for the data to be

Trying to show a loader div until the Ajax-populated div is returned. Want to hide "responseDiv" until it's filled with Ajax data and display a loading div in the meantime. #loading { background: url('images/loading.gif') no-repeat cent ...

javascriptjquerycssajax

Is there a way to obtain the current user's name using the Json Web Token?

I'm currently struggling to extract the name and other details from the JWT, as I've only been able to retrieve the user's ID so far. This section contains the authentication routes: const config = require("config"); const jwt = require("j ...

node.jsreactjsjwt

What is the best way to show the title when a user hovers over a word?

Below is an illustration of the code: <p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines ...

htmlcsstooltiptitle

Sliding Menu with jQuery

My goal is to create a dynamic menu that reveals sub-menu items by sliding them down and changing the background color upon clicking. I am currently using the HTML code displayed below, with the sub1 and sub2 elements initially hidden using display:none; ...

jqueryhtmlcssmenu

The Material Ui Datepicker is throwing an error, indicating that it requires a string input

I have been attempting to integrate a Datepicker into my React Project using the Material UI's DatePicker. Initially, I followed the instructions on this website. However, it did not work as expected. Therefore, I decided to try a different approach b ...

reactjsmaterial-ui

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Currently, I am utilizing the Twitter OAuth library in conjunction with PHP to publish a tweet from my website directly to my Twitter account. My main objective is to highlight some text while posting, however, I have not been successful in identifying t ...

phphtmlcsstwitter

IE8 experiencing issues with colgroup tag

Having trouble styling a data table with alternating row colors. 1) Need help applying alternating row style without having to add classes to each individual TD? 2) Colgroup works in IE8 but having alignment issues for specific columns (cols=A&SI Cap ...

htmlcsscross-browsercolgroup

Having trouble implementing the Material UI time picker because it does not meet the required DateTime format

REVISE I recently switched my dataType from DateTime to TimeSpan in my code. I have a functioning MVC version that already uses TimeSpan, and the times are posted in HH:MM format. Now, I am unsure if the issue lies with the headers set up on Axios or if it ...

c#reactjs.nettypescriptmaterial-ui

Beware: React higher-order component alert - Caution: It is not possible to modify a component from within the function body of another

Recently, I crafted a simple higher-order component that retrieves data from an API endpoint and handles loading, error messages, or displaying content upon success. Although the component functions correctly, it triggers the following error message: War ...

reactjstypescriptreact-reduxreact-functional-component

several different objects within the rightIconButton of a ListItem component in MaterialUI

I am currently working on a project where I need to add multiple elements to the rightIconButton of a ListItem. The tools I am using are Material UI v0.20 and [email protected] <ListItem rightIconButton={ <span> ...

javascriptreactjsmaterial-ui

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

Generate a Vue component that automatically wraps text dynamically

Challenge I am looking for a way to dynamically wrap selected plain text in a Vue component using the mouseUp event. For instance: <div> Hello World! </div> => <div> <Greeting/> World! </div> Potential Solution Approach ...

javascripthtmlvue.jsfrontend

Ways to ensure that an inner div causes the outer div to shift downward

Imagine I have a div. Within this div, there are two divs positioned side by side with the float left property. The div on the left is designated for an image. However, if the image is too tall, it does not expand the outer div to accommodate it. Instead ...

csstemplates

I am facing an issue with not being able to access session.payment_intent within Stripe

I integrated Stripe wallet into my Next.js project and created a test account for development purposes. Here is the server-side code: checkout_session.js const stripe = require("stripe")( "sk_test_xxxxx" ); export default async fun ...

node.jsreactjsnext.jsstripe-payments

What should the website do if none of the paths are found - direct to a 404 error page?

<Routes> {!userlog ? ( <Route path="/" element={<AuthLayout />}> <Route index element={<Login />} /> <Route path="/login" element={<Login />} /> <Route path="/sig ...

javascriptreactjsreact-router

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

After sending AJAX requests and receiving HTML with multiple div elements (.card), I am using .append to add new .card elements after each request, creating an infinite scroll effect. However, I am facing issues when trying to use .each to iterate over all ...

javascriptjqueryhtmlcssajax

A React.js calendar timeline with the usability and functionality of Google's scheduling features

Is there a timeline calendar available specifically for React.js that can display upcoming events like Google Calendar? I've done extensive searching but haven't had any success so far. All I need is a library or component that can take a JSON ...

reactjscalendarnext.jstimeline

Having trouble getting CSS :last-of-type to work properly alongside :not?

I have encountered an issue with selecting the last list item in a specific case. I have a list of items where only one can be selected at a time, and when selected, it should be displayed at the top of the list using flex ordering. However, I am having tr ...

htmlcsscss-selectorsflexbox

API Post request encountering fetch failure

The route "/api/users/register" on my express server allows me to register an account successfully when passing data through Postman. However, when trying to register an account using the front-end React app, I'm encountering a "TYPE ERROR: Failed to ...

javascriptnode.jsreactjsexpress