How to align section and footer to the left of sidenav?-CodePudding

I'm new to html and css. I'm practicing building html layouts and I'm having a little difficulty. I can't figure out how to align the footer and section to the left of nav. These always overlap with correct percentage widths. Why does this happen?

body {
  background: gray;
}

section {
  background: red;
  display: block;
  width: 70%;
  position: absolute;
  top: 0;
  right: 0;
}

footer {
  background: green;
  display: block;
  width: 70%;
  padding: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

nav {
  display: block;
  width: 30%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  color: #fff;
  padding: 10px;
}

<body>
  <nav >
  <!-- Put Here content of sidebar -->
  Content example
  </nav>
  
  <section>
  <!-- Put Here content of section -->
  Content example
  </section>
</body>

<footer>
  Content example
</footer>

CodePudding user response：

body {
  background: gray;
}

section {
  background: red;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  height: 4vh;
}

footer {
  background: green;
  display: inline-block;
  width: 100%;
  height: 4vh;
}

nav {
  display: inline-block;
  width: 30%;
  height: 20vh;
  background: blue;
  color: #fff;
}

spacer {
  width: 100%;
  height: 12vh;
  display: inline-block;
}

html,
body,
nav,
section,
footer {
  margin: 0;
  padding: 0;
}

div {
  display: inline-block;
  width: 70%;
  vertical-align: top;
}

<nav >
  <!-- Put Here content of sidebar -->
  nav
</nav><!--
--><div>
  <section>
    <!-- Put Here content of section -->
    section
  </section>
  <spacer>&nbsp;</spacer>
  <footer>
    footer
  </footer>
</div>

CodePudding user response：

Don't use position: absolute, you can use display: grid

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: gray;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  display: grid;
  place-content: space-between;
  grid-template-columns: 30% 70%;
  grid-template-areas: "nav section" "nav footer";
}

section {
  background: red;
  grid-area: section;
  height: 50px;
}

footer {
  background: green;
  padding: 20px;
  grid-area: footer;
  height: 50px;
}

nav {
  grid-area: nav;
  height: 100%;
  background: blue;
  color: #fff;
  padding: 10px;
}

<main>
  <nav >
    <!-- Put Here content of sidebar -->
    Content example
  </nav>

  <section>
    <!-- Put Here content of section -->
    Content example
  </section>

  <footer>
    Content example
  </footer>
</main>