htmlcsssasscompass-sasssusy

Best way to add floating area beside susy gallery?

Here's a link to the codepen so far

The number of items in the gallery is based on search results, but I'd like the area to the right to be filled with a fixed area that will stay where it's at as the user scrolls down the search results gallery. So basically, the last 2 of 8 with a "card" styled the same as the gallery cards, but with a fixed-height to be about the height of 2 gallery cards. Hope that 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>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</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>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</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>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</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>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</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 of where I'd like the 'floating' element to live: enter image description here

Solution

  • You want to add a div that is fixed like:

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

    the right:0px aligns the div to the right.

    make sure your main div is not overlapping the right div.

    basic example to show the idea.