Scrolling UL with fixed header

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;
}

In the fiddle, using Chrome when I uncomment the width rule in CSS, I get a 100% width title that floats ontop of the list as it scrolls... That is what you are wanting to achieve is it not? — Michael, Feb 13 '13 at 20:47
I want the title to match the width of the ul underneath, and to let the ul scroll underneath it (title should not scroll). — Spencer, Feb 13 '13 at 21:20

score 2 · Answer 1 · answered Feb 13 '13 at 20:55

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;
}

That works, but is there a way to just make it the width of the ul? Let's say, for example, the ul can change widths later on. I guess I'd just have to change it to the same on both elements? — Spencer, Feb 13 '13 at 21:03

score 0 · Answer 2 · answered Feb 13 '13 at 20:47

0

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%;

answered Feb 13 '13 at 20:47

Garry

4,996
5
32
44

Scrolling UL with fixed header

2 Answers2

Linked