Why is there a horizontal scrollbar when my total width is 100vw?

Question

Here is the code. I don't know why there is a horizontal scrollbar.

<html>
<head>
</head>
<body style="width: 100vw">
<div style="float: left; width: 220px">a</div>
<div style="float: left; width: calc(100vw - 220px)">b</div>
</body>
</html>

Why the downvote? It's a valid question even though it's simple. — Searene, Jul 20 '18 at 21:46

score 1 · Accepted Answer · answered Jul 20 '18 at 15:21

This is due to the default margin in the browser stylesheet.

body {
  margin: 0;
}

<html>

<head>
</head>

<body style="width: 100vw">
  <div style="float: left; width: 220px">a</div>
  <div style="float: left; width: calc(100vw - 220px)">b</div>
</body>

</html>

Why is there a horizontal scrollbar when my total width is 100vw?

1 Answers1