Scrolling Ul With Fixed Header

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

Solution 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: 0px5px0px5px;
    /* uncomment to make the title match the ul width (see listHeader too)*//*position: relative;*/
}

.listHeader {
    color: #ffffff;
    background: #444444;
    padding: 10px0px10px0px;
    text-transform: uppercase;
    font-weight:bold;
    font-size:11px;
    text-align: left;
    text-indent: 1em;
    position: absolute;
    width: 48%;
    z-index:10;


.scrollingListli {
    overflow: auto;
    height: 20px;
    color: #666666;
    background-color: #cccccc;
    font-weight: lighter;
    padding: 10px;
    margin: 2px000;
    list-style-type: none;
}

Solution 2:

http://jsfiddle.net/9zcRy/9/

.listHeader {
color: #ffffff;
background: #444444;
padding: 10px0px10px0px;
text-transform: uppercase;
font-weight:bold;
font-size:11px;
text-align: left;
text-indent: 1em;
position: absolute;
z-index:10;
width:46%;