How to make a side navbar and have a div fill the rest of the space

Question

I've been at this for multiple hours, and nothing has worked. I'm trying to create a vertical side navigation bar on the left of the page with a width of 200 px and have it go all the way down the screen, depending on the content of the page it's on. In the remaining space to the right, I need to have a div for the "main content" of the page that completely fills the area and doesn't extend off the screen at all.

I've been mostly trying to style with flexboxes, because that seems to have gotten me the closest to my goal. However, usually whenever I apply some type of specific positioning or make some small change like change the height of one of the divs to 100%, they'll either completely disappear or reposition themselves in some strange place at the bottom of the page. Honestly, I've restarted so many times that my code is pretty simple. I'll just leave some tags that I think are useful.

body {
    margin: 0
}

.container {
    display: flex; 
}

.sidenav {
    width: 200px;
    height: 100%;
    float: left;
    position: absolute;
    background-color: blue;
}

.content {
    float: left;
    position: absolute;
    background-color: red;
}


<div class="container">
    <div class="sidenav"></div>
    <div class="content"></div>
</div>

If required, I'm fine with js, jquery, or php. If you happen to know anything, thanks in advance!

Your solution works just fine... – Roberto Zvjerković Jul 16 '19 at 06:15 — Roberto Zvjerković, Jul 16 '19 at 06:15

score 1 · Answer 1 · answered Jul 16 '19 at 06:26

Here's some markup which might help get you started:

<!DOCTYPE html>
<style>
body {
  display: flex;
  align-items: stretch;
  margin: 0;
}
div {
  color: white;
  padding: 1em;
}
#side {
  width: 200px;
  background: orange;
  min-height: calc(100vh - 2em);
}

#content {
  background: purple;
  flex: auto;
}
</style>
<div id="side">
  Sidebar
</div>
<div id="content">
  Content
</div>

Some notes:

You mentioned flexbox, so I've used that. You don't need to float your sidebar in the flexbox. However you do need flex: auto on your content so that it gets the left over space.
You should use align-items: stretch to make the sidebar and content the same height (as whichever is larger.)
You should set a minimum height to the full screen. You can use min-height: 100vh; and use nested divs inside the content and sidebar. Here I have set padding on the divs directly instead, so I have accounted for that by subtracting out the 2×1 em padding from the height. The same would apply to a border. Or you can investigate the box-sizing property.

HTH, good luck!

Thanks! I combined your code with some box-sizing properties and alignments and it worked great. — sortarobin, Jul 16 '19 at 21:32
Glad it was useful. You can accept the answer if you want others to see that. ;) — Dominic Cooney, Jul 18 '19 at 05:49

score 0 · Answer 2 · answered Jul 16 '19 at 06:24

Just to be sure, you want the blue sidebar on the left with a width off 200px? The rest off the page should be red?

Could this be something?

body {
    margin: 0
}

.container {
    display: flex; 
}

.sidenav {
 height: 100vh;
    width: 200px;
    float: left;
    position: relative;
    background-color: blue;
}

.content {
 height: 100vh;
 width: calc(100% - 200px);
    float: right;
    position: relative;
    background-color: red;
}

<div class="container">
    <div class="sidenav"></div>
    <div class="content"></div>
</div>

score 0 · Answer 3 · answered Jul 16 '19 at 06:26

Something like this should work. You don't have to use position absolute at all, this is really only needed in some special cases. I set the container to at minimum 100vh, meaning it has at least full height of the browser window. Sidenav was set to 200px in width with no growing or shrinking parameters, the content was set to flex: 1 which means: Take all of the available space that's left.

body {
    margin: 0
}

.container {
    display: flex;
    min-height: 100vh;
}

.sidenav {
    flex: 0 0 200px;
    background-color: blue;
}

.content {
    background-color: red;
    flex: 1;
}

<div class="container">
    <div class="sidenav">
      <p> Here be navigation </p>
    </div>
    <div class="content">
     <p> Here be dragons </p>
</div>

Thank you! I forgot about min-height. I had to adjust some values after I added my actual content into the divs, but other than that, this styling worked great. — sortarobin, Jul 16 '19 at 21:29

score 0 · Answer 4 · answered Jul 16 '19 at 06:30

.container {
    display: flex;
    height: 100vh;
 }
 .content {
   flex: 1 1 auto;
   background: #eeeee7;
   overflow: auto; /* for fixed side bar*/
  }
    
  .sidenav {
    flex: 0 0 200px; 
    background-color:blue;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
      <div class="sidenav"></div>
      <div class="content"></div>
    </div>
</body>
</html>

score 0 · Answer 5 · answered Jul 16 '19 at 06:41

Try this. This should definitely work.

.container {
    display: block;
}

.sidenav {
    width: 200px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: blue;
}

.content {
    background-color: red;
    margin-left: 200px;
}

How to make a side navbar and have a div fill the rest of the space

5 Answers5