Side-navbar pushing text underneath-CodePudding

I am trying to create a Side-navbar for a products section of my website. Whenever I create my navbar, the text gets pushed down underneath it. Any ideas?

body {
  margin: 0;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  background-color: #f1f1f1;
  position: relative;
  height: 75%;
  overflow: auto;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<section>
  <section >
    <ul>
      <li><a href="index.html"><b>HOME</b></a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </section>
  <div style="margin-left:15%; margin-top:-10% padding:1px 16px;">
    <h2>Products</h2>
    <h3>Here is where the product name will be</h3>
    <p>Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information</p>
  </div>
</section>

CodePudding user response：

I swapped out the section with aside . Also, you should define a width on your parent and use display: flex;. Then you can split up the child elements within by giving those a width also.

body {
  margin: 0;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f1f1f1;
  position: relative;
  height: 100%;
  overflow: auto;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.sidenav {
  width: 15%;
}

section > div {
  width: 85%;
}

section.wrapper {
  display: flex;
  width: 100%;
}

<section >
  <aside >
    <ul>
      <li><a href="index.html"><b>HOME</b></a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </aside>
  <div>
    <h2>Products</h2>
    <h3>Here is where the product name will be</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</section>

CodePudding user response：

You can fix with flexbox like this. But i would recommend you to do refactor in your html and css

body {
  margin: 0;
}

.main {
  display: flex;
 }
 
.sidenav {
    width: 25%;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  position: relative;
  height: 75%;
  overflow: auto;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.divRight {
  width: 75%;
  display: flex;
  flex-flow: column;
}

<section class='main'>
    <section >
      <ul>
        <li><a href="index.html"><b>HOME</b></a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="shop.html">SHOP</a></li>
        <li><a href="contact.html">CONTACT</a></li>
      </ul>
    </section>

    <div class='divRight'>
      <h2>Products</h2>
      <h3>Here is where the product name will be</h3>
      <p>Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information</p>
    </div>
  </section>

CodePudding user response：

body {
  margin: 0;
}

main {
  display: inline-block;
  max-width: 400px;
  padding: 1px 16px;
}

.contain-really-long-text {
  inline-size: 300px;
  overflow-wrap: break-word;
}

.sidenav {
  height: 100%;
  width: 20%;
  display: inline-block;
  vertical-align: top;
}

.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  position: relative;
}

.sidenav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<section>
  <nav >
    <ul>
      <li><a href="index.html"><b>HOME</b></a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="shop.html">SHOP</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
  <main>
    <h2>Products</h2>
    <h3>Here is where the product name will be</h3>
    <p > Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information.Information</p>
  </main>
</section>

CodePudding user response：

First of all you should put css only in css files, not in html:

<div style="margin-left:15%; margin-top:-10% padding:1px 16px;">

Second, take care of div and section, they have a default value "display:block"

You should put a class to the second div where you put the content.

.Sidenav and second div put

display: inline-block

One mistake is to put a value of 75% to ul, but, 75% of what? You should set a height of his parent first

.sidenav {
min-height: 100vh;
width: 15%;
}

.Sidenav ul {
width: 100%;
height: 75%;
}

In this way 100% width of ul means 15% of entire screen because of his parent witch has 15% width.

You can set an width of 85% for the second div

More easly to do all of this with flex box or grid, but you need to understand these concepts first.