Elements vw adding up to 100 but going to next line

by

I have a few elements in my html that have vws that add up to 100, yet it only works with 99.6, and that leaves a small gap. I have tried a few methods like using % instead of vw but that didn’t seem to work. If anybody knows why this might be happening or if this has happened before, please let me know.

body {
  margin: 0px;
}

p {
  font-size: 25px;
}

div {
  width: 70vw;
  margin-left: 0vw;
}

aside {
  width: 20vw;
  display: inline-block;
}

main {
  width: 70vw;
  margin-right: 5vw;
  margin-left: 5vw;
}
<header>
  <img id="title" src="https://stackoverflow.com/questions/78058280/Hello.svg">
  <a href="index.html"><button>Home</button></a>
  <a><button>Upload</button></a>
  <a><button>Categories</button></a>
  <a><button>About</button></a>
  <a><button>Credits</button></a>
</header>
  <main>
    <h2>Home</h2>
    <div class="tutorial">
      <h4 class="tutorial-title"></h4>
      <img class="thumbnail" src="http://img.youtube.com/vi/gQwgbpyIuEc/mqdefault.jpg">
      <p>This is the title</p>
    </div>
  </main>
  <aside>
    <p>Version 2.0.1</p>
  </aside>

  • main is a block element by default, so aside won’t go next to it here either way. And if you make main inline-block as well – then you are of course still dealing with the spacing that the whitespace between the element tags introduces; 70 + 20 + 5 + 5 plus a space character’s width, is simply more than 100. Your question is basically a duplicate of stackoverflow.com/q/5078239/1427878; although Brett is IMHO correct here, and you should really look into contemporary layout systems like flexbox, rather than mess with inline-block.

    – 




Robust layouts are created using flexboxes and grids. Get the layout fundamentals right and you won’t need to worry about details like fractional percentages.

body {
  margin: 0;
  font-size: 20px;
}

header {
  display: flex;
  gap: 0.5em;
  align-items: center;
  border: 2px solid red;
}

nav a {
  font-size: 15px;
  background: #eee;
  border: 0;
  border-radius: 5px;
  padding: 3px 6px;
}

header {
  padding: 1em;
}

main {
  display: grid;
  grid-template-columns: 4fr 1fr; /* equivalent to 80% 20% */
  border: 2px solid blue;
}

.left {
  border: 2px solid lime;
  padding: 0 1em;
}

.right {
  border: 2px solid pink;
  font-size: 10px;
  padding: 0 1em;
}
<header>
  <img id="title" src="http://picsum.photos/50">
  <nav>
    <a>Home</a>
    <a>Upload</a>
    <a>Categories</a>
    <a>About</a>
    <a>Credits</a>
  </nav>
</header>
<main>
  <div class="left">
    <h2>Home</h2>
    <div class="tutorial">
      <h4 class="tutorial-title"></h4>
      <img class="thumbnail" src="http://img.youtube.com/vi/gQwgbpyIuEc/mqdefault.jpg">
      <p>This is the title</p>
    </div>
  </div>
  <div class="right">
    <p>Version 2.0.1</p>
  </div>
</main>

Leave a Comment