CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RoyBarOn
RoyBarOn

Reputation: 987

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>

Upvotes: 4

Views: 1526

Answers (5)

rebecca
rebecca

Reputation: 963

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

Upvotes: 1

Arrabidas92
Arrabidas92

Reputation: 1153

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 :

enter image description here

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>

Upvotes: 1

Alexis
Alexis

Reputation: 5831

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>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

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.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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">

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

  </div>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337550

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.

Upvotes: 3

Related Questions