I have a left menu in my layout, and my grid rows are extending after the left menu

Question

My layout has a left menu, and then I have my header with menu, and then my main content area.

What is happening is that if I add another grid row in my main content area, it is getting pushed below the fold to just under the left menu.

Have I made a fundamental mistake in my grid layout or is there a simple fix for this?

<div class="container-fluid">
  <div class="menu-container">
       <ul class="menu" id="sidemenu">
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
    </ul>
  </div>

  <div class="content-container">
    <div class="header">
      <div class="row">
        <div class="col-sm-6">
          left header
        </div>
        <div class="col-sm-6 text-right">
          right header
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="row">
        <div class="col-sm-12">
          this is a row #1
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          this is a row #2
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/4oak4p0o/14/

score 1 · Accepted Answer · answered Apr 14 '17 at 20:09

1

Add overflow: auto to .content-container .page-content. The .row class clears floats, so that's clearing the floated left menu. https://jsfiddle.net/4oak4p0o/15/

answered Apr 14 '17 at 20:09

Michael Coker

52,626
5
64
64

can you explain why this works? is it different than display:inline-block ? – Blankman Apr 14 '17 at 20:15
`inline-block` is not the same as `overflow: auto`. Two fundamentally different behaviors. bootstrap adds `display: table; content: " ";` to pseudo elements of `.row`, so the first one works, but that will clear the float on your nav menu for the next row. `overflow: auto` will contain the `.row` classes to the `.page-content` instead of overflowing outside and pushing the next row down to clear the floated left menu. – Michael Coker Apr 14 '17 at 20:26

score 0 · Answer 2 · edited May 23 '17 at 12:02

something like this? I added display: inline-block; to .content-container .page-content

read more here: CSS display: inline vs inline-block

What effect do you want, you can uncomment the css style and add background color to check the container / block

* {
    border: 1px solid red;
}

.menu-container {
  width: 120px;
  float: left;
  display: block;
  padding: 15px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.content-container {
  width: 100%;
  padding-left: 120px;
}

.content-container .header {
  padding: 15px 20px;
  height: 60px;
}

.content-container .page-content {
  padding: 50px;
 /* background: green; */
  display: inline-block;
}


/* * {
 border: 1px solid red;
} */

<div class="container-fluid">
  <div class="menu-container">
    <ul class="menu" id="sidemenu">
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
    </ul>
  </div>

  <div class="content-container">
    <div class="header">
      <div class="row">
        <div class="col-sm-6">
          left header
        </div>
        <div class="col-sm-6 text-right">
          right header
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="row">
        <div class="col-sm-12">
          this is a row #1
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          this is a row #2
        </div>
      </div>
    </div>
  </div>
</div>

I have a left menu in my layout, and my grid rows are extending after the left menu

2 Answers2