title: sidebar moving to the bottom
body: <p>I decided to start a new personal project today which is a forum type of thing (just for practice).
  I set up the basic layout and wrote some of the PHP functions but when I add a new post, the sidebar moves down and underneath the posts.</p>
  
  <p>here's some pics:
  <br>
  <br>
  <img src="https://i.stack.imgur.com/jDaCP.png" alt="sidebar with only one post :)">
  <br>
  <br>
  <img src="https://i.stack.imgur.com/FsOYI.png" alt="sidebar with more than one post :("></p>
  
  <p><strong>Sidebar.php</strong></p>
  
  <pre><code>&lt;div class ="sidebar"&gt;
  
  &lt;div class = "col-lg-3 profile-tab sidebar-nav"&gt;
  
      &lt;img src="images/dummy-pic.png" alt = ""&gt;&lt;br&gt;
          &lt;a href = "#"&gt;USERNAME&lt;/a&gt;&lt;br&gt;
          &lt;span&gt;Post count: x&lt;/span&gt;&lt;br&gt;
          &lt;span&gt;Likes: x&lt;/span&gt;
  
  
  &lt;/div&gt;
  
  &lt;div class="col-lg-3"&gt;
      &lt;ul class="sidebar-nav"&gt;
          &lt;h4 class = "sb-heading"&gt;Post Categories&lt;/h4&gt;
              &lt;li&gt;&lt;a href="#"&gt;Category Name&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Category Name&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Category Name&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Category Name&lt;/a&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class = "col-lg-3"&gt;
      &lt;ul class="sidebar-nav"&gt;
          &lt;h4 class = "sb-heading"&gt;Announcements&lt;/h4&gt;
  
              &lt;li&gt;interesting stuff&lt;/li&gt;
              &lt;li&gt;interesting stuff&lt;/li&gt;
              &lt;li&gt;interesting stuff&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Posts.php</strong></p>
  
  <pre><code>&lt;div class = "post col-lg-8"&gt;
  
  &lt;h2 class = "page-header"&gt;&lt;?php echo $post_title; ?&gt;&lt;/h2&gt;
  &lt;p class = "lead"&gt;By
  &lt;a href = "#"&gt;&lt;?php echo $post_author ?&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;span class = "glyphicon glyphicon-time"&gt;&lt;?php echo $post_date ?&gt;&lt;/span&gt;
  
  &lt;img class = "img-responsive" src = "&lt;?php echo $post_image; ?&gt;" /&gt;
  &lt;br&gt;
  &lt;p&gt;    
  &lt;?php 
  echo $post_content;
   ?&gt;
  
  &lt;/p&gt;
  
  &lt;br/&gt;
  &lt;a class = "btn btn-primary" href = "#"&gt;READ MORE&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;?php } ?&gt;
  </code></pre>
  
  <p><strong>relevant CSS</strong></p>
  
  <pre><code>.sidebar-nav{
  background-color: #ffffff;
  margin-top: 15px;
  border:2px solid #1b76bc;
  border-radius: 10px;
  padding: 20px 0 20px  0;
  text-align: center;
  
  
  }
  
  div.post.col-lg-8{
  
  margin-left: 20px;
  }
  
  .sidebar-nav li{
  
      list-style: none;
  }
  
  .post{
  
  padding:15px;
  margin-top: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  border: 2px solid #1b76bc;
  padding: 20px;
  
  }
  </code></pre>
  
  <p>I used col-lg-3 instead of 4 for the sidebar so that I could add a left margin to the post. There's probably a better way but just a heads up</p>
  
  <p>If you need the css file let me know.</p>
  
  <p>I really appreciate it!</p>