Search code examples
csshtmlviewport-units

Viewport unit VW overlaps - less than 100 vw per viewport?

From my understanding 1vw is 1/100th of the width of a viewport so there are 100vw across a given viewport. However, when I have two divs with width 25vw one positioned 25vw from the right edge and once positioned 25vw from the left edge and they overlap a good deal. This holds across multiple browsers, why would this be the case?

#sign_up_button{
    position: fixed;
    padding: none;
    top: 68vh;
    right: 25vw;
    width: 25vw;
    border: solid;
}
#login_button{
    position: fixed;
    top: 68vh;
    left: 25vw;
    width: 25vw;
    border: solid;
}
<div id="sign_up_button">Test</div>
<div id="login_button">Test</div>

Solution

  • You need to include border size in the width itself: actually your div width is 25vw + <border size>, so use box-sizing property in order to include the border in the width definition

    div {
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

    Further info: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing