Question 38688 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

How do I move content from the bottom to the right of a sidebar? – Ubuntu

I’m working through some self guided coding curriculum and currently doing a small project building a holy grail layout with flexbox. Here is my codepen https://codepen.io/clayco/pen/KKeNjrm

Currently, all of the cards are displayed under the sidebar when they should be to the right of it.

I’m guessing it has something to do with the flex direction of the body being set to column, but I’ve tried changing the flex directions around and it doesn’t help the problem.

Anyways, here’s my code.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  height: 72px;
  background: darkmagenta;
  color: white;
  font-size: 32px;
  font-weight: 900;
  align-items: center;
  display: flex;
  text-indent: 16px;
}

.footer {
  height: 72px;
  background: #eee;
  color: darkmagenta;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  display: flex;
  min-width: 300px;
  height: calc( 100vh - 72px);
  flex-direction: column;
  gap: 50px;
}

.container {
  display: flex;
  flex-grow: 1;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  flex: 1 1 250px;
}

.cards {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: 50px;
  width: 1000px;
}
<div class="header">
  MY AWESOME WEBSITE
</div>

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">⭐ - link one</a></li>
      <li><a href="#">🦸🏽‍♂️ - link two</a></li>
      <li><a href="#">🖌️ - link three</a></li>
      <li><a href="#">👌🏽 - link four</a></li>
    </ul>
  </div>
</div>

<div class="cards">
  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
  <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
<div class="footer">
  The Odin Project ❤️
</div>

Thanks so much

Tags:

2

Answers


  1. 0

    create one common parent div for container and cards
    example

    <div class="parent-element" style="display:flex; align-items="flex-start"">
     <div class="container"></div>
     <div class="cards"></div>
</div>
    Login or Signup to reply.
  2. 0

    I’ve made a few changes. I’ve put the cards in a wrapper div called .card-container. As the container is display:flex it will automatically put both side by side. The only issue with this is that your sidebar and card container will be different heights so I’ve added align-items:stretch which solves that problem and removed the height property in the .sidebar selector.

    I’ve also removed the width property from your cards rule so the cards don’t stretch out beyond the browser window.

    Hope this helps

    Your code, annotated with all changes, below.

    body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  height: 72px;
  background: darkmagenta;
  color: white;
  font-size: 32px;
  font-weight: 900;
  align-items: center;
  display: flex;
  text-indent: 16px;
}

.footer {
  height: 72px;
  background: #eee;
  color: darkmagenta;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  display: flex;
  min-width: 300px;
  /* height: calc( 100vh - 72px); */
  flex-direction: column;
  gap: 50px;
}

.container {
  display: flex;
  flex-grow: 1;
  /* added align-items: stretch so the sidebar height and card-container height match */
  align-items: stretch;
}


/* added card container as a wrapper for your cards */

.card-container {
  /* doesn't need any CSS as it's already 100% width and blank but feel free to style as you want it*/
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
  flex: 1 1 250px;
}

.cards {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: 50px;
  /* removed width so the contents don't stretch beyond the browser window */
  /*width: 1000px;*/
}
    <div class="header">
  MY AWESOME WEBSITE
</div>

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">⭐ - link one</a></li>
      <li><a href="#">🦸🏽‍♂️ - link two</a></li>
      <li><a href="#">🖌️ - link three</a></li>
      <li><a href="#">👌🏽 - link four</a></li>
    </ul>
  </div>

  <div class="card-container"> <!-- Added this -->
    <div class="cards">
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div><!-- added this -->
</div>
<div class="footer">
  The Odin Project ❤️
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search