Question

I’m looking for a way to make navigation arrows (red boxes) follow the screen this way:

But I can not find a way to put them there… it would be very easy to put them to the very left and very right but I’d like it to be in the middle and it’s a bit problematic. I managed to make it work in 90% of browsers (green solution) but it’s not perfect and it doesn’t work in some popular browsers.

UPDATE #1: There’s one more important thing – I’d like red boxes to be sometimes above 600px content (on small resolutions around 600px and below).

UPDATE #2: 600px container has actually: max-width: 1600px; width: 90%; and 600px is just an example resolution to better illustrate the gap.

Answer 1

Something like this ?

You can play with the max-width to test with multiple widths.

Check if that suit you.

---

I copy the code here, for “future-proofness” (if one day codepen disappear)

HTML

<div id="buttons">
  <div id="left">L</div>
  <div id="right">R</div>
</div>

<div id="foobar">
  <div id="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
</div>

CSS

#foobar {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 50px;
}

#content {
  background-color: #ddd;
}

#buttons {
  width: 700px;
  margin-left: -350px;
  background-color: #aaa;
  position: fixed;
  left: 50%;
  top: 50%;

}
#left, #right {
  width: 50px;
  height: 50px;
  position: absolute; 
  background-color: red;
}
#right {
  right: 0
}

JS (JQUERY)

$(function(){
  refresh_buttons = function(){
    w = $('#foobar').width() + 100;
    $('#buttons')
      .css('width', w)
      .css('margin-left', -w/2);
  };

  refresh_buttons();
  $(window).resize(refresh_buttons);
})