What is the most effective method for incorporating a floating section next to a Susy gallery?

Check out my latest progress on the codepen here

The number of items displayed in the gallery is dynamic based on search results. However, I am looking to add a fixed area to the right side that remains visible as the user scrolls through the gallery. Essentially, I want the last 2 out of 8 items to be styled like cards but with a fixed height equivalent to about 2 gallery cards. I hope this explanation makes sense!

<div class="wrap">
  <div class="compare-gallery">
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h5>2015</h5>
          <h4>A title here</h4>
          <p>Content goes here...</p>
        </div>
      </div>
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h5>2015</h5>
          <h4>A title here</h4>
          <p>Content goes here...</p>
        </div>
      </div>
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h5>2015</h5>
          <h4>A title here</h4>
          <p>Content goes here...</p>
        </div>
      </div>
    <div class="gallery-item">
      <div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
        <div class="gallery-text">
          <h4>A title here</h4>
          <p>Content goes here...</p>
        </div>
      </div>
 </div>
</div>

and the css:

@import 'susy';
@import 'compass';
@include border-box-sizing;


.compare-gallery {
  @include clearfix;
  margin-top: 80px;
}

.gallery-item {
  background-color: rgba(255, 255, 255, 0.6);
  @include box-shadow(0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23));
  @include gallery(3 of 8 split);
  margin-bottom: gutter(8);
  .gallery-image {
    float: left;
  }
  .gallery-text {
    h5 {
      float: right;
    }
  }
}

Here's an image illustrating where I envision the 'floating' element to appear: https://i.sstatic.net/GMMHg.jpg

htmlcsssasscompass-sasssusy

Answer №1

If you're looking to include a fixed div, consider using the following CSS:

.page-side {
  position:fixed;
  right:0px;
  width: 200px;
}

The 'right:0px' property ensures the div is aligned to the right side of the page.

Be mindful that your main content does not overlap with the fixed div on the right.

Here's a basic example illustrating this concept.

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

Issues retrieving information from MySQL through an AJAX request

I am encountering an issue while attempting to fetch data from a database. The code seems to only retrieve the initial row of data and not any subsequent rows. Although the data is correct, it remains the same regardless of the input provided in the HTML f ...

phpjqueryhtmlmysqlajax

Alter the background of a div in a webpage using PHP and jQuery to display a

I have a collection of 10 background images for each season (Spring, Summer, etc.) stored in folders labeled 1, 2, 3, and 4. I am looking to randomly change the div background image for each season. For example, changing the random image from folder 1 for ...

phpjqueryhtmlcss

Customize material-ui button designs using styled-components

I'm currently facing an issue with overriding the border-radius of a material-ui button using styled-components. Despite setting it to 0, it's not taking effect. Here is the code snippet: import React from "react"; import styled from "styled-co ...

htmlcssreactjsmaterial-uistyled-components

The Angular8 form encounters an error when trying to access the 'valid' property of an undefined value

I am implementing a register form to add an employee and including validation for accuracy. However, I encountered an error message that reads "cannot read property of 'valid' of undefined." Here is the code snippet: HTML <div class="conta ...

htmlangularvalidationtypeerror

String casting for large JavaScript integers may require rounding to function properly

When trying to pass a large integer to a function from an onclick event in HTML, I always encounter issues with rounding. Despite using bigInt libraries, I still struggle to pass the full number accurately and would prefer a simple string casting method. ...

javascripthtmlbigint

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...

csshtml

Using Bootstrap4 to merge rows into a single column or apply rowspan in Bootstrap

Hey there, I have a specific requirement that I need help with. Check out the image here. I want to enable the LCM information box when the LCM checkbox is checked. Below is my code: <div class="panel-body "> <div class="c ...

javascriptcssbootstrap-4

Challenges with displaying content in Bootstrap tabs

I am currently working on the following code: HTML <div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" role="tablist" id="tabs_list"> <li class="nav-item"> <a class="nav-li ...

jqueryhtmlbootstrap-4

What could be causing my grid to malfunction once the media query is triggered?

I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I ...

htmlcssmedia-queriescss-grid

Using template expressions to access properties that contain spaces

Here is the code structure that I am working with: "name": { "age": [ { "data": { "how old": "23" } }, One of my JSON keys has a space in it. How can I access this pr ...

javascripthtmlangular

Is it possible to create an HTML select that displays transparent text after a selection

I'm currently working on customizing the appearance of an HTML select element with various background color options. Everything is functioning properly, but I have a specific requirement. I want the text in the dropdown options to be visible only when ...

jqueryhtmlcolorshtml-select

How to Extract Text Content Excluding the Wrapping Tag from an Element Using JSoup

How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...

javahtmljsoup

Tips for aligning multiline text in the center of images with varying widths

Excuse my lack of experience, but I have a question, I am looking to center a header and some text next to an image with variable width. Additionally, the text should be able to position on either side of the image, while still being coded first in the HT ...

phphtmlcsscenter

The function `canvas.toDataURL()` does not produce an image as output

When I expect the image to return mirrored, it instead shows up as a black image. <!DOCTYPE html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <bo ...

javascripthtmlhtml5-canvas

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out h ...

javascripthtmlcssreactjsmaterial-ui

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

Is the Expand All / Collapse All feature malfunctioning when used with a tree table?

I have been working on implementing the Expand All/Collapse All feature for a nested tree table, but unfortunately, I am not achieving the desired output. I referred to a related question on this topic which can be found here. You can also view the code on ...

javascripthtmljquery

Choose every fourth row in the table

Is there a way to alternate the background colors of selected groups of 4 rows in a table? I want to make one group red and the next group blue. Any suggestions or ideas on how to achieve this? <table> <tr style="background-color: red;"> ...

javascriptjqueryhtmlcss

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Recently, I've been attempting to make adjustments to a responsive website that utilizes media queries. Despite my efforts, whenever the site is viewed on a mobile-sized screen, it consistently requires horizontal scrolling regardless of the screen&a ...

csshtmlscale

In the absence of a value

In my code, I've implemented a functionality that saves the user's input into local storage and displays it in a specific ID. However, I want to make sure that if the input field is left empty, the user is prompted to enter their name. function ...

javascripthtml