CODEWITHSUNDEEP
htmlcssflexbox
parsecer
parsecer

Reputation: 5106

Can't stick sidebar to the left with flexbox

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.

Upvotes: 1

Views: 246

Answers (1)

Soban
Soban

Reputation: 434

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

Upvotes: 3

Related Questions