PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 8, 2022

[FIXED] How do I move content from the bottom to the right of a sidebar?

 November 08, 2022     css, flexbox, html     No comments   

Issue

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


Solution

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>


Answered By - Giorgi Shalamberidze
Answer Checked By - Pedro (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing