I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...

Here is an Example

And here is what I've done so far:

  $('.results_toggle').on('click', function() {
    $(this).toggleClass('left_hide');
    $('.left').toggle();
  });

    .cont {
      width: 100vw;
    }

    .left {
      position: relative;
      width: 50vw;
      height: 100vh;
      background-color: grey;
      float: left;
      border-left: 2px solid white;
    }

    .right {
      height: 100vh;
      width: 50vw;
      float: left;
    }

    .results_toggle:before {
      content: "\f054";
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      color: black;
      font-size: 24px;
      padding-right: 0.5em;
      position: absolute;
      top: 14px;
      left: 5px;
    }

    .results_toggle {
      background-color: grey;
      height: 60px;
      width: 30px;
      position: absolute;
      z-index: 106;
      top: 45vh;
      right: 223px;
      border-bottom-right-radius: 110px;
      border-top-right-radius: 110px;
      border-bottom: 0;
    }

    .left_hide {
      left: 0px;
    }

<script src=".1.1/jquery.min.js"></script>

      <div class="cont">
        <div class="left">
        </div>
        <div class="results_toggle">
        <!-- the button -->
        </div>
        <div class="right">
        </div>
     </div>

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...

Here is an Example

And here is what I've done so far:

  $('.results_toggle').on('click', function() {
    $(this).toggleClass('left_hide');
    $('.left').toggle();
  });

    .cont {
      width: 100vw;
    }

    .left {
      position: relative;
      width: 50vw;
      height: 100vh;
      background-color: grey;
      float: left;
      border-left: 2px solid white;
    }

    .right {
      height: 100vh;
      width: 50vw;
      float: left;
    }

    .results_toggle:before {
      content: "\f054";
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      color: black;
      font-size: 24px;
      padding-right: 0.5em;
      position: absolute;
      top: 14px;
      left: 5px;
    }

    .results_toggle {
      background-color: grey;
      height: 60px;
      width: 30px;
      position: absolute;
      z-index: 106;
      top: 45vh;
      right: 223px;
      border-bottom-right-radius: 110px;
      border-top-right-radius: 110px;
      border-bottom: 0;
    }

    .left_hide {
      left: 0px;
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <div class="cont">
        <div class="left">
        </div>
        <div class="results_toggle">
        <!-- the button -->
        </div>
        <div class="right">
        </div>
     </div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 26, 2017 at 8:24 Dij 9,81844 gold badges2020 silver badges3535 bronze badges asked Jul 26, 2017 at 8:23 RoyBarOnRoyBarOn 99733 gold badges2929 silver badges7777 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:

<div class="cont">
  <div class="left"></div>
  <div class="right">
    <div class="results_toggle"></div>    
  </div>
</div>

.right {
  position: relative; /* add this */
}

.results_toggle {
  /* remove 'right' */
  left: 0; /* add this */
}

Working example

The advantage of this method is that it will be pletely unaffected by any change in screen resolution.

You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .

If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way

See snippet below

$('.results_toggle').on('click', function() {

  $(this).toggleClass('left_hide');
  $('.left').toggle();

});

.cont {
  width: 100vw;
}

.left {
  position: relative;
  width: 50vw;
  height: 100vh;
  background-color: grey;
  float: left;
  border-left:2px solid white;
}

.right {
  height: 100vh;
  width: 50vw;
  float: left;
}

.results_toggle:before {
      content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: black;
    font-size: 24px;
    padding-right: 0.5em;
    position: absolute;
    top: 14px;
    left: 5px;
}

.results_toggle {
      background-color: grey;
    height: 60px;
    width: 30px;
    position: absolute;
    z-index: 106;
    top: 50%;
    right:50%;
    transform:translate(100%,-50%);
    border-bottom-right-radius: 110px;
    border-top-right-radius: 110px;
    border-bottom: 0;
}

.left_hide{
  left:0px;
}

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <div class="left">

  </div>
  <div class="results_toggle">

  </div>
  <div class="right">

  </div>
</div>

For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :

The main div is represented by the red background. Inside you have your left div and aligned with your right button.

Here is the code to make this :

<html>
 <head>
  <meta charset='utf-8' />
  <style type="text/css">
  .cont
  {
   display: flex;
   align-items: center;
   background-color: red;
   color: white;
  }
  .left
  {
   background-color: blue;
   margin: 5px;
  }
  button
  {
   background-color: green;
  }
  </style>
 </head>
 <body>
   <div class="cont">
    <div class="left">
     <p>Left div</p>
    </div>
    <div class="results_toggle">
      <button>Right button</button>
    </div>
    <div class="right"></div>
   </div>
 </body>
</html>

not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box. Here's a fiddle

edit: another option: position: relative and float: left without left or right property updated fiddle

It's because you've fixed each property.

You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.

Example

.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}

.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}

<div class="parent">
<button class="child">btn</button>
</div>