HTML don't let vertical scrollbar create horizontal scrollbar

Question

In my HTML page, I have many width: 100vw things that take up the entire page. There is a vertical scroll bar, and it causes a horizontal scrollbar (because the vertical scrollbar takes up like 20 pixels).

The bigger problem this causes is my things seem off-centered. Though only slightly, once you notice it (which takes like 3 seconds of staring), it doesn't go away and is very frustrating. I posted a screenshot of a super small browser window. I also posted the code.

Image

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }
    
    div {
      width: 100vw;
      height: 60vh;
      margin: 0 0 1vh 0;
      background-color: #CCC;
      text-align: center;
    }
  </style>
</head>

<body>
  <div>A div tag</div>
  <div>A div tag</div>
</body>

</html>

The text is off center. How do I fix this?

score 3 · Accepted Answer · answered Jul 16 '19 at 04:15

3

Change the div to width: 100%?

body {
    margin: 0;
}

div {
    width: 100%;
    height: 60vh;
    margin: 0 0 1vh 0;
    background-color: #CCC;
    text-align: center;
}

<div>A div tag</div>
<div>A div tag</div>

answered Jul 16 '19 at 04:15

bowlowl

417
2
7

score 1 · Answer 2 · answered Jul 16 '19 at 04:33

Div is block element you don't need to define any width till you required specifically.

so in you case just remove the width and your problem will resolve.

 body {
                margin: 0;
            }
            div {
                height: 60vh;
                margin: 0 0 1vh 0;
                background-color: #CCC;
                text-align: center;
            }

<!DOCTYPE html>
<html>
   
    <body>
        <div>A div tag</div>
        <div>A div tag</div>
    </body>
</html>

score 1 · Answer 3 · answered Jul 16 '19 at 04:48

1

To remove the horizontal scroll bar make width: auto

answered Jul 16 '19 at 04:48

Prabhat Kumar

13
4

HTML don't let vertical scrollbar create horizontal scrollbar

3 Answers3