Can't stick sidebar to the left with flexbox

Question

I have a simple layout: header + sidebar + form. I'm trying to stick the sidebar to the left, while the form is near the center/wherever. Sidebar and form are inside a wrapper content div with display: flex; flex-direction: row; justify-content:center. I tried setting margin-left:0 on the sidebar div, but it didn't work:

JsFidlde: https://jsfiddle.net/2qzmkwaj/

Current output:

Need to achieve:

/*
  Positioning
*/

#app {
  display: flex;
  flex-direction: column;
  justify-items: center;
}

#navbar {
  display: flex;
  justify-content: flex-end;
}

#navbar .button {
  margin-right: 20px;
  background-color: green;
}

#header {
  background-color: dimgray;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#logo-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 100%;
}

#content {
  display: flex;
  justify-content: center;
  border: 1px solid red;
  height: 100%;
}

#sidebar {
  margin-left: 0 !important;
  border: 1px solid black;
  height: 100%;
}

#content form {
  margin-left: 0;
  border: 1px solid white;
  height: 100%;
}

/*
  Colors
*/

#sidebar {
  background-color: yellow;
}

body {
  background-color: chocolate;
}

#content textarea {
  background-color: black;
  color: silver;
}

<div id="app">

  <div id="header">
    <div id="navbar">
      <div class="button">
        Button
      </div>
      <div class="button">
        Button
      </div>
      <div class="button">
        Button
      </div>
    </div>

    <div id="logo-wrapper">
      <div id="logo">
        <img width="100" src="https://i.pinimg.com/originals/37/25/de/3725deaa9c536997aaa2f4956c2045b3.jpg" />
      </div>
    </div>
  </div>

  <div id="content">

    <div id="sidebar">
      <div class="sidebar-option">
        Option
      </div>

      <div class="sidebar-option">
        Option
      </div>

      <div class="sidebar-option">
        Option
      </div>
    </div>

    <form>
      <textarea></textarea>
    </form>
  </div>
</div>

I also need to make the sidebar take all of the page height. I tried height: 100% on both the content and sidebar divs, but it didn't work.

https://stackoverflow.com/q/38948102/3597276 – Michael Benjamin May 20 '20 at 16:04 — Michael Benjamin, May 20 '20 at 16:04

Soban · Accepted Answer · 2020-05-20T17:09:17.343

3

In your css, try adding this

#content > *{
    margin-right: auto;
    height: calc(100vh - 115px);
}

This is for aligning the sidebar to the left of the screen and making the sidebar cover the rest of the remaining screen height.

Let me explain what is happening:

When you say margin-right: auto; you are saying that that the margin from the right side of the screen should automatically be determined. So in this case, it align it to the left side of the screen.

And now for making the sidebar the height of the screen:

We say that we want the height of the sidebar 100vh, which is 100 view height. But if we just leave it like that, the sidebar will take the full height of the page(including the logo and the 2 divs above it). But we don't want that. We want the sidebar to take the rest of the screen height(excluding the logo and the 2 divs above it). So we calculate the height of the logo(which is 79px) + the height of the 2 divs which is 18px + 18px. So the total height will be 115px. So simply, we just subtract 115px from the 100vh.

Hope it helps

edited May 20 '20 at 17:09

answered May 20 '20 at 15:32

Soban

436
5
13

Should explain why `auto` – Rainbow May 20 '20 at 15:37
When you say margin-right: auto; you are saying that that the margin from the right side of the screen should automatically be determined. So in this case, it align it to the left side of the screen. – Soban May 20 '20 at 15:40
And now in the answer itself :) Means, please move the explanation to the answer itself.. – Mosh Feu May 20 '20 at 15:41
Here's the explanation https://stackoverflow.com/a/33856609/7148391 – Rainbow May 20 '20 at 15:42

Can't stick sidebar to the left with flexbox

1 Answers1