title: Removing unwanted vertical space between 2 divs
body: <p>I'm having trouble aligning <code>#totalAvailable2</code> to the bottom of <code>#container2</code>.
  I got it to work with <code>#container1</code> and <code>#totalAvailable</code>, as you'll see in the jsfiddle below.</p>
  
  <p>JSFiddle Demo: <a href="http://jsfiddle.net/7rWJr/2" rel="nofollow">http://jsfiddle.net/7rWJr/2</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id = "outerContainer"&gt;
      &lt;ul&gt;
          &lt;li id="firstList"&gt;
              &lt;div id="container1"&gt;
                  &lt;div id = containter1Header&gt;Mobile Chef&lt;/div&gt;
                  &lt;div id = "innerContainer"&gt;
                      &lt;!-- Content goes here --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="totalAvailable"&gt;Total:&lt;span id = "span"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="secondList"&gt;
              &lt;div id="container2"&gt;
                  &lt;div id = containter2Header&gt;Mobile Chef&lt;/div&gt;
                  &lt;div id = "innerContainer"&gt;
                      &lt;!-- Content goes here --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;div id="totalAvailable2"&gt;Total:&lt;span id = "span2"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/*********************************/
  /* BEGIN OUTER CONTAINER STYLING*/
  /*********************************/
  
  #outerContainer ul li {
      list-style: none;
  }
  #outerContainer ul li#firstList {
      list-style: none;
      float: left;
  }
  #outerContainer ul li#SecondList {
      list-style: none;
      padding: 0px;
      margin:0px;
  }
  
  /*********************************/
  /* END OUTER CONTAINER STYLING*/
  /*********************************/
  
  
  /*********************************/
  /* BEGIN INNER CONTAINER STYLING*/
  /*********************************/
  
  #innerContainer {
      margin-left: 30px;
  }
  #totalAvailable {
      height: 50px;
      width:  490px;
      background-color: black;
      color: white;
      font-size: 23px;
      font-weight: bold;
      padding-left: 10px;
      padding-top: 15px;
      font-family: arial;
      border-width: 4px;
      border-style: solid;
      border-color: gray;
      margin-left: 10px;
      border-top-style: none;
  }
  #totalAvailable2 {
      height: 50px;
      width:  490px;;
      background-color: black;
      color: white;
      font-size: 23px;
      font-weight: bold;
      padding-left: 10px;
      padding-top: 15px;
      font-family: arial;
      border-width: 4px;
      border-style: solid;
      border-color: gray;
      display: inline-block;
      border-top-style: none;
      margin-left: 40px
  }
  
  /*********************************/
  /* END INNER CONTAINER STYLING*/
  /*********************************/
  
  
  #container1 {
      background: url("http://www.anytimeinteractive.com/dev/test/images/bgdk.jpg");;
      margin-left: 10px;
      margin-top: 40px;
      padding-bottom: 20px;
      border-width: 4px;
      border-style: solid;
      border-color: gray;
      overflow: auto;
      height: 600px;
      width: 500px;
      overflow: auto;
  }
  
  #container2{
      height: 600px;
      width: 500px;
      background: url("http://www.anytimeinteractive.com/dev/test/images/bgdk.jpg");;
      margin-left: 40px;
      margin-top: 40px;
      padding-bottom: 20px;
      border-width: 4px;
      border-style: solid;
      border-color: gray;
      display: inline-block;
      overflow: auto;
  }
  </code></pre>
  
  <p>Thanks!</p>