How to design this construction? – HTML & CSS – SitePoint Forums

Hi,

A little bit hard to explain what I need but I will tree to make it clear:

I have a div which has a fix height and always full width (100vw). This div is positions absolute on my screen.
In this div I want to add other divs which have 40vw one by one. So after first item it should look like that:

Then, depending on users action I need to add another div of the same size. The result should look like this:

As you can imagine, the number of divs is theoretically endless. So when I add the next one it will not fit the screen. In that case it should look like that

but the user should be able to scroll horizontal to see all entries.
Also if the user has, for example scrolled to the right to see the last entry completely, and I add another entry at the left, the div should not scroll to another position (the user should not be disturbed watching the entry)

I guess this is very simple but I am struggling atm.

I can’t tell exactly how to get that look, but using flexbox you can achieve it.

Here’s an example →

.main_manager_container {
  grid-area: main;
  display: flex;
  justify-content: space-between; // You might even achieve the look you're after playing around with this? 
  align-items: flex-start;
  gap: 1.250em;
  max-width: $max-container-width;
  margin: 0 auto;

  .article {
    flex: 0 0 calc(33.33% - 1.250em);
    display: flex;
    min-height: 25.00em;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    span {
      color: blue;
      cursor: pointer;
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
    &:only-child {
      // Styles for when there is only one article
      flex: 0 1 100%;
      max-width: 600px; // Set a max-width for single article for better readability
      margin: auto; // Center the article in the container
    }
 
    // This is how you could manipulate the individual div elements
    &:first-child:last-child {
      // Alternative way to target an only child
      // Add any specific styles here
    }

    &:only-of-type, // Only one article of this type
    &:first-child:nth-last-child(2), // First child when there are exactly two children
    &:last-child:nth-child(2) { // Last child when there are exactly two children
      flex-basis: calc(50% - 1.250em); // Adjust the width for two articles
      max-width: none; // Reset any specific max-width set for single articles
    }
    .largeImage {
      display: inline-block;
      transition: transform 0.3s ease-in-out;

      &:hover {
        transform: scale(1.1); // Enlarge on hover
      }
    }

    &:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .imageStyle {
      border-radius: 5px 5px 0 0;
      width: 100%; // Make the image fill the width of the article
      height: 200px; // Set a fixed height, adjust as needed
      object-fit: cover; // Cover the area, maintain aspect ratio, crop if necessary
    }

    .articleHeading {
      font-family: $font-family;
      font-size: clamp(1rem, 2rem, 1.5rem); // Using only rem units

      margin-bottom: 10px;
      color: $primary-color;
      line-height: 1.0;
    }

    .articleText {
      font-family: $font-family;
      font-size: clamp(1rem, 1rem, 1.5rem); // Using only rem units

      padding: 1.25em;
      color: $primary-color;
      line-height: 1.6;
      text-align: left;
      white-space: pre-wrap;
    }
  }
}

Sorry I use SCSS, but it’s not to hard to figure out the CSS.

Thanks for you answer but I have no experience with flex.

So iu have made a fiddle

which does not work like expected. Can you help to make it work?

Something like this perhaps?

Rather than flex, use display: inline-block; and disable word wrapping. I don’t think there is a way to prevent the items moving when pre-pending a div in just html/css so you need a little JS to adjust the scroll position by the width of the newly added item.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.