title: keep children div inside of parent div
body: <p>Okay, hi, I feel like this is a very silly question, and I've found a lot of questions like it, but none of the answers seemed to work for me.</p>
  
  <p>My issue is that have one div (taskbar) and inside of it another div (taskbar-bar) and I want taskbar-bar to stay within taskbar. I tried putting position on absolute and relative and it didn't seem to work at all, it's always underneath the taskbar div. I could push it up with top, but I don't feel like that's the way to go right now. I don't know, though, I'm honestly very new to CSS and HTML and still am learning.</p>
  
  <p>Here's a jsfiddle of my code: <a href="https://jsfiddle.net/5zghzczs/3/" rel="nofollow noreferrer">https://jsfiddle.net/5zghzczs/3/</a></p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.taskbar {
      width: 100%;
      height: 40px;
      box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset;
      background-color: #C2C5CA;
      position: absolute;
      left: 0;
      bottom: 0;
  }
  #taskbar-start {
      margin-top: 4px;
      margin-bottom: 2px;
      margin-left: 2px;
      width: 90px;
      height: 33px;
      background-color: #C2C5CA;
      cursor: pointer;
  }
  .taskbar-start-inactive {
      box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
  }
  .taskbar-start-active {
      box-shadow: -1px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #000 inset, 2px 2px 0px 0px #868A8E inset;
  }
  .taskbar-start-frame-active {
      margin-top: 2px;
      margin-left: 2px;
      width: 84px;
      height: 27px;
      border-style: dotted;
      border-width: 1px;
      position: absolute;
  }
  .taskbar-start-logo {
      margin-top: 6px;
      margin-left: 3px;
      width: auto;
      height: 20px;
      -webkit-user-select: none;
  }
  .taskbar-start-text {
      margin-top: 10px;
      margin-left: 5px;
      display: inline;
      font-size: 12px;
      letter-spacing: -2px;
      -webkit-user-select: none;
      font-family: "Press Start 2P";
      position: absolute;
  }
  .taskbar-bar {
      height: 35px;
      width: 2px;
      background: green;
    margin-left: 100px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="taskbar"&gt;
     &lt;div id="taskbar-start" class="taskbar-start-inactive"&gt;
              &lt;div id="taskbar-start-frame"&gt;
                  &lt;img class="taskbar-start-logo" src="img/logo.png" /&gt; 
                  &lt;div class="taskbar-start-text"&gt;Start&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;div class="taskbar-bar"&gt;&lt;/div&gt;
  </code></pre>