Aligning tab to the right of the webpage

Admin 1
Viewed 47

I am trying to align a tab button to the right of the screen but all I get get close to is it facing the wrong way and get close to the right. Here is my code and the image.

div#olark_tab {
  position: fixed;
  right: 0;
  bottom: 50%;
  z-index: 5000;
}

#olark_tab div {
  height: 150px;
  width: 150px;
  float: right;
  transform: rotate(-90deg);
}

#olark_tab a {
  background-color: grey;
  opacity: 0.5;
  color: aqua;
  font: bold 18px "century gothic";
  height: 20px;
  padding: 6px;
  border: 2px solid #363636;
  display: block;
  text-decoration: none;
  text-align: center;
  width: auto;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
  border-top-style: none;
  border-top-width: 0;
}

#olark_tab a:hover {
  background-color: white;
  color: aqua;
}
<div id="olark_tab">
  <div>
    <a href="javascript:void(0);" onclick="olark('api.box.expand')">
       Click to chat
    </a>
  </div>
</div>

enter image description here

How would I get it the the edge of the right side?

css html
2 Answers

You know the tab size, parent size, so it should be easy to calculate.

Set negative right margin, to #olark_tab div with value (parent width - element height - padding-top - padding-bottom) / 2. In this case it's -59px.

div#olark_tab{
    position: fixed;
    right: 0;
    bottom:50%;
    z-index:5000;
}

#olark_tab div{
    width: 150px;
    margin-right: -59px; /* (150 - 20 - 2*6) / 2 */
    transform: rotate(-90deg);
}

#olark_tab a{
    background-color: grey;
    opacity: 0.5;
    color: aqua;
    font: bold 18px "century gothic";
    height: 20px;
    padding: 6px;
    border: 2px solid #363636;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
    border-top-right-radius:9px;
    border-top-left-radius:9px;
    border-top-style: none;
    border-top-width: 0;
}

#olark_tab a:hover{
    background-color: white;
    color: aqua;
}
<div id="olark_tab">
    <div>
        <a href="javascript:void(0);" onclick="olark('api.box.expand')">
            Click to chat
        </a>
    </div>
</div>

user_15956690

This shows how to get your tab oriented correctly:

I only changed transform: rotate(-90deg); to transform: rotate(90deg);

I borrowed @pavel's fine answer.

div#olark_tab{
    position: fixed;
    right: 0;
    bottom:50%;
    z-index:5000;
}

#olark_tab div{
    width: 150px;
    margin-right: -59px;
    transform: rotate(90deg);
    
}

#olark_tab a{
    background-color: grey;
    opacity: 0.5;
    color: aqua;
    font: bold 18px "century gothic";
    height: 20px;
    padding: 6px;
    border: 2px solid #363636;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
    border-bottom-right-radius:9px;
    border-bottom-left-radius:9px;
    border-top-style: none;
    border-top-width: 0;
}

#olark_tab a:hover{
    background-color: white;
    color: aqua;
}
<div id="olark_tab">
    <div>
        <a href="javascript:void(0);" onclick="olark('api.box.expand')">
            Click to chat
        </a>
    </div>
</div>

user_88015990
Related