RoyBarOn RoyBarOn - 3 years ago 53
CSS Question

How to fix an element to the right of 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.com/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>




Answer Source

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 completely unaffected by any change in screen resolution.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download