How to position my content next to my sidebar?-CodePudding

I am not very well versed in HTML and CSS. I am currently building a website and I integrated a sidebar into my web application using Bootstrap, but it has messed my layouts, and I can't seem to figure out how to move the content in a block to the left of side of my sidebar.

Please view the image on this link [1]: https://i.stack.imgur.com/XFaVv.png

As seen in the picture above, my sidebar is located at the right and my content is located at the below of my sidebar. Below are my codes for my sidebar and the base template.

// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
  menu_toggle.classList.toggle('is-active');
  sidebar.classList.toggle('is-active');
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Sidebar Section */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 20px;
  background: linear-gradient(#ed7014, #fa5b3d);
  /* With Scrollbar */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar h3 {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.sidebar .menu {
  margin: 0 -1rem;
}

.sidebar .menu .menu-item {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
  color: rgb(255, 238, 151);
  ;
  border-right: 5px solid rgb(255, 238, 151);
}


/* Content Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ffa500;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d67229;
}


/* Content Section */

.content {
  flex: 1 1 0;
  padding: 2rem;
  background: linear-gradient(#dd5713, #d67229);
}

.content img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
}

.content h1 {
  font-family: 'Bungee', cursive;
  color: #fff;
  margin-bottom: 1rem;
}

.content strong {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.content p {
  text-align: justify;
  color: #fff;
}


/* Sample Code Content */

.sample-code {
  width: 65%;
  background: rgb(255, 238, 151);
  padding: 1em;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: 15px 15px;
}

.sample-code p {
  color: #000;
}


/* Button Sidebar section */

.menu-toggle {
  display: none;
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background-color: #ed7014;
  cursor: pointer;
}

.button {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.button>span,
.button>span::before,
.button>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.button>span::before {
  content: '';
  top: -8px;
}

.button>span::after {
  content: '';
  top: 8px;
}


/* Button Animation */

.menu-toggle.is-active .button>span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .button>span::before {
  top: 0;
  transform: rotate(0deg);
}

.menu-toggle.menu-toggle.is-active .button>span::after {
  top: 0;
  transform: rotate(90deg);
}


/* Sidebar Footer */

.white-section {
  text-align: center;
}

.p-white-sec {
  color: #fff;
}

.container-fluid {
  padding: 7px 15px;
}

.footer-icon {
  margin: 20px 10px;
  color: #fff;
}

.footer-icon:hover {
  color: #ffa500;
  transition: 0.2s linear;
}


/* Mobile Size */

@media (max-width: 1024px) {
  /* Sidebar Section */
  .sidebar {
    max-width: 200px;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
}

@media (max-width: 768px) {
  /* Sidebar Section */
  .menu-toggle {
    display: block;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }
  .sidebar.is-active {
    left: 0;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
  /* Content */
  .content {
    padding-top: 8rem;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Codin'up | HTML Course</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:ital,wght@0,300;1,400;1,700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source Code Pro&display=swap" rel="stylesheet">

  <!-- Favicon -->
  <link rel="shortcut icon" href="/favicon.png">

  <!-- CSS Stylesheet -->
  <link rel="stylesheet" href="/CSS/List of Course/HTML Course.css">
</head>

<body>
  <section >
    <!-- Button for Sidebar -->
    <div >
      <div >
        <span></span>
      </div>
    </div>

    <!-- Sidebar Section -->
    <aside >
      <a href="/HTML/List of Course/HTML Course.html">
        <img src="/Logo/Codin'up Logo (1) White.png" alt="Codin'up">
      </a>
      <h3>HTML Course</h3>

      <nav >
        <a href="/HTML/Home.html" >Home</a>
        <a href="/HTML/Courses.html" >Courses</a>
      </nav>

      <hr>

      <nav >
        <a href="/HTML/List of Course/HTML Course.html" >HTML Introduction</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
        <a href="#" >HTML Course no.</a>
      </nav>

      <hr>

      <!-- Sidebar Footer -->
      <footer  id="footer">
        <div >
          <a href="https://twitter.com/i/flow/login"><i ></i></a>
          <a href="https://www.facebook.com/login.php/"><i ></i></a>
          <a href="https://www.secure.instagram.com/accounts/login/?next=/pbnddj/&source=profile_posts&hl=en-gb"><i ></i></a>
          <a href="https://www.google.com/gmail/about/"><i ></i></a>
          <p >&copy; 2022 ITMAWD21 Group 3</p>
        </div>
      </footer>
    </aside>

    <!-- Content Section -->
    <main >
      <h1>Introduction To HTML</h1>
      <img src="/Logo/HTML Logo.png" alt="Codin'up Logo">

      <strong>Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
        corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
        iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
        eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>

      <!-- Sample Code Content -->
      <div >
        <p>&lt;html&gt;</p>
        <p><span style="padding-left: 20px;">&lt;head&gt;</span></p>
        <p><span style="padding-left: 40px;">&lt;title&gt;HTML Course&lt;/title&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;/head&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;body&gt;</span></p>
        <p><span style="padding-left: 40px;">&lt;p&gt;Hello World&lt;p&gt;</span></p>
        <p><span style="padding-left: 20px;">&lt;/body&gt;</span></p>
        <p>&lt;/html&gt;</p>
      </div>

      <strong>Code Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
    </main>
  </section>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/c9df5e490e.js" crossorigin="anonymous"></script>

  <!-- Bootstrap JS & External JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  <script src="/JS/List of Course/HTML Course.js"></script>
</body>
</html>

Can someone help me fit the content to the right beside my sidebar especially its layout? Thanks for the big help!

CodePudding user response：

I don't know if i understand well but.

Try in the content class to add:

width:100%;
padding-left:300px; (the width of the menu)

CodePudding user response：

.sidebar has a position; fixed. You could apply styling to the main content <main style="left: 272px;position: absolute;">. But you must also account for the media queries adjusting the width of the sidebar. E.g.

@media (max-width: 1024px){
  .sidebar {
     max-width: 200px;
  }
  main.content {
     left: 200px;
  }
}

and

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }

  main.content {
     left: 0;
     height: 100%;
  }
}

I would also use width property over max-width. To be sure that the content is aligns always as expected.