Flexbox & Element Positions

Question

I am developing a asp.net core MVC web application, using bootstrap and am trying to create a sidebar and main content area. I have created the code below within a partial view which is then referenced in _Layout.cshtml. This working as expected however I wish for my main content (currently placeholder text) to be positioned next to this, instead of what is seen in the image below where it is pushed below the sidebar.

This I the look I am trying to achieve:

Essentially a design with the sidebar on the left with main content on the right, however as can be seen the main content currently shows below the sidebar.

The HTML for the Sidebar:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column text-white bg-dark" style="width: 280px; height: 100vh;">
  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
    <img class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" alt="Logo" style="height: 60px; width: 150px;" />
  </a>
  <div class="d-flex align-items-center text-light text-decoration-none">

  </div>
</div>

<div class="container d-flex flex-column">
  <main role="main" class="pb-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum.
      Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada
      fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.</p>
  </main>
</div>

How can I position the main placeholder content next to the sidebar instead of below it?

Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) — Orion the Constellation, Apr 29 '21 at 17:24
Add `display: flex` to the parent element of `sidebar` and `main` container — Mir entafaz Ali, Apr 29 '21 at 17:42
We need to see a [mcve]. The code you've provided here does not match your screenshots. — TylerH, Apr 29 '21 at 19:18

score 1 · Answer 1 · answered Apr 29 '21 at 18:11

Your problem could be easily solved by using flexbox rightfully. Here is the code for you.

HTML:

<div class="wrapper d-flex justify-content-between">
   <div class="item d-flex flex-column text-white bg-dark">
      <a class="d-flex align-items-center justify-content-center text-white text-decoration-none" href="/">
         <img alt="Logo" class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" style="height: 60px; width: 150px;"/>
      </a>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
      </ul>
      <hr>
      <div class="d-flex align-items-center text-light text-decoration-none justify-content-center">
         <ul class="nav-item d-flex">
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="fas fa-paint-roller">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="far fa-question-circle">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="">
                  <i class="fab fa-github">
                  </i>
               </a>
            </li>
         </ul>
      </div>
   </div>
   <div class="item d-flex flex-column">
      <main class="p-5" role="main">
        <h2>Home</h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum. Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.
         </p>
      </main>
   </div>
</div>

CSS:

<style type="text/css">
    body, html {
        height: 100%;
    }
    .wrapper {
        width: 100%;
        height: 100%;
    }
    .wrapper .item:nth-child(1) {
        flex: 0.25;
    }
    .wrapper .item:nth-child(2) {
        flex: 0.7;
    }
</style>

How does this "use flexbox rightly" where OP's code doesn't? — TylerH, Apr 29 '21 at 19:19

Flexbox & Element Positions

1 Answers1