Scrolling UL with fixed header - html

Question

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?
fiddle here: http://jsfiddle.net/9zcRy/2/
The HTML
<div class="talkingPointsHolder">
<div class="genericScriptsHolder">
<span class="listHeader">List One</span>
<ul
class="scrollingList">
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
<li>item 1.4</li>
<li>item 1.5</li>
<li>item 1.6</li>
<li>item 1.7</li>
<li>item 1.8</li>
<li>item 1.9</li>
<li>item 1.10</li>
<li>item 1.11</li>
<li>item 1.12</li>
</ul>
</div>
<div class="genericScriptsHolder">
<span class="listHeader">List Two</span>
<ul
class="scrollingList">
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
<li>item 2.4</li>
<li>item 2.5</li>
<li>item 2.6</li>
<li>item 2.7</li>
<li>item 2.8</li>
<li>item 2.9</li>
<li>item 2.10</li>
<li>item 2.11</li>
<li>item 2.12</li>
</ul>
</div>
The CSS
.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;
}

Answer 1

You need to define the width of an element if you're using position: absolute;
I set the width your .list-header to match the width of your .genericScriptsHolder and then adjusted the padding accordingly.
Here's the fiddle: http://jsfiddle.net/9zcRy/15/
Notice that I removed the horizontal margins that you created for the scrolling list line items and instead edited the styling on the parent .genericScriptsHolder element.
.genericScriptsHolder {
float: left;
width: 48%;
margin: 0px 5px 0px 5px;
/* 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;
width: 48%;
z-index:10;
.scrollingList li {
overflow: auto;
height: 20px;
color: #666666;
background-color: #cccccc;
font-weight: lighter;
padding: 10px;
margin: 2px 0 0 0;
list-style-type: none;
}

Answer 2

http://jsfiddle.net/9zcRy/9/
.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;
width:46%;