title: Scrolling UL with fixed header
body: <p>I have a ul with a title in a div and I'm trying to make the ul scroll while keeping the title fixed.  I also want to have the title match the width of the ul.  I'm able to do one of those at a time, but not both together.  Either I get a ul with a title that is 100% of the ul width, or I get a title that stays put when the list scrolls, but it doesn't match the ul width.  Can someone point out what I'm doing wrong?</p>
  
  <p>fiddle here: <a href="http://jsfiddle.net/9zcRy/2/" rel="nofollow">http://jsfiddle.net/9zcRy/2/</a></p>
  
  <p>The HTML </p>
  
  <pre><code>&lt;div class="talkingPointsHolder"&gt;
  &lt;div class="genericScriptsHolder"&gt; 
      &lt;span class="listHeader"&gt;List One&lt;/span&gt;
  
      &lt;ul
      class="scrollingList"&gt;
          &lt;li&gt;item 1.1&lt;/li&gt;
          &lt;li&gt;item 1.2&lt;/li&gt;
          &lt;li&gt;item 1.3&lt;/li&gt;
          &lt;li&gt;item 1.4&lt;/li&gt;
          &lt;li&gt;item 1.5&lt;/li&gt;
          &lt;li&gt;item 1.6&lt;/li&gt;
          &lt;li&gt;item 1.7&lt;/li&gt;
          &lt;li&gt;item 1.8&lt;/li&gt;
          &lt;li&gt;item 1.9&lt;/li&gt;
          &lt;li&gt;item 1.10&lt;/li&gt;
          &lt;li&gt;item 1.11&lt;/li&gt;
          &lt;li&gt;item 1.12&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="genericScriptsHolder"&gt; 
      &lt;span class="listHeader"&gt;List Two&lt;/span&gt;
  
      &lt;ul
      class="scrollingList"&gt;
          &lt;li&gt;item 2.1&lt;/li&gt;
          &lt;li&gt;item 2.2&lt;/li&gt;
          &lt;li&gt;item 2.3&lt;/li&gt;
          &lt;li&gt;item 2.4&lt;/li&gt;
          &lt;li&gt;item 2.5&lt;/li&gt;
          &lt;li&gt;item 2.6&lt;/li&gt;
          &lt;li&gt;item 2.7&lt;/li&gt;
          &lt;li&gt;item 2.8&lt;/li&gt;
          &lt;li&gt;item 2.9&lt;/li&gt;
          &lt;li&gt;item 2.10&lt;/li&gt;
          &lt;li&gt;item 2.11&lt;/li&gt;
          &lt;li&gt;item 2.12&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS</p>
  
  <pre><code>.talkingPointsHolder {
      border: 1px solid black;
      background: #eeeeee;
      height: 200px;
      overflow: auto;
  }
  
  .genericScriptsHolder {
      float: left;
      width: 48%;
      margin: 0px 2px 0px 2px;
      /* uncomment to make the title match the ul width (see listHeader too)*/
      /*position: relative;*/
  }
  
  .listHeader {
      color: #ffffff;
      background: #444444;
      padding: 10px 0px 10px 0px;
      text-transform: uppercase;
      font-weight:bold;
      font-size:11px;
      text-align: left;
      text-indent: 1em;
      position: absolute;
      z-index:10;
  
      /* uncomment to make the title match the ul width (see genericScriptsHolder too)*/
      /*width: 100%;*/
  }
  
  .scrollingList {
      position: relative;
      top: 31px;
  }
  
  .scrollingList li {
      overflow: auto;
      height: 20px;
      color: #666666;
      background-color: #cccccc;
      font-weight: lighter;
      padding: 10px;
      margin: 2px;
      list-style-type: none;
  }
  </code></pre>