Search code examples
htmlcssgridsidebar

Left sidebar with the content div on right with Bootstrap

I have a problem here with my HTML / CSS grid, made using Bootstrap 4. I'm trying to create a left sidebar ( fixed ) with a div on right for content ( this will not be fixed ). I've tried to do this, but you can see the result in the image: left sidebar problem

What I really want to do is to display the orange sidebar inline with that black box. My code for this is:

see the code snippet

.primary_continer {
  background-color: #4423d4;
  height: 100%;
  padding-top: 55px;
  margin: 0;
  position: relative;
  overflow: hidden;
  display: table;
}

.left_menu {
  width: 100%;
  /*235px*/
  max-width: 235px;
  height: 100%;
  background-color: #ff9303;
  padding-top: 80px;
  padding-left: 0px;
  float: left;
  position: fixed;
  display: table-cell;
}

.center_content {
  background-color: #000;
  width: 70%;
  /*700px*/
  float: right;
  position: relative;
  display: table-cell;
}

HTML:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="container-fluid primary_continer">
  <div class="row justify-content-md-left">
    <div class="col col-lg-2 left_menu">
      1 of 3
    </div>
    <div class="col center_content">
      Variable width content
    </div>
  </div>
</div>

Solution

  • Just gave margin-left (width of fixed) to the content

    .center_content {
  background-color: #000;
  width: 70%;
  float: right;
  position: relative;
  display: table-cell;
  margin-left: 235px; /*Added*/
  color:#fff;/*Added for me*/
  min-height: 100vh; /*Added newly*/
}