CODEWITHSUNDEEP
htmlcsspositioncss-position
Atadj
Atadj

Reputation: 7180

Fixed container relative to a DIV - is this possible?

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

enter image description here

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.

Upvotes: 1

Views: 101

Answers (2)

Byscripts
Byscripts

Reputation: 2588

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);
})

Upvotes: 1

w3jimmy
w3jimmy

Reputation: 712

yes you can. use left or right at 50% and then adjust margin left or right depending on which you used. assuming your box has 100px width:

#box1{
    position: fixed;
    right: 50%;
    margin-right:-300px; //adjust more or less as you want
}
#box2{
    position: fixed;
    left: 50%;
    margin-left:-300px; //adjust more or less as you want
}

Upvotes: 1

Related Questions