Jon Jon - 2 months ago 17
Sass (Sass) Question

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

Answer

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.