IE6, IE7: stretch last li to cumulative width of previous li's

Question

Given this markup:

<ul class="grafiek">
    <li class="first-child">item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="last-child">item</li>
</ul>

How do I make it appear, cross-browser, like so:

In other words: the last item (with the fake pseudo-class last-child) should always stretch to accomodate the cumulative total width of the previous, arbitrary amounts (within reason of course), of <li>'s

This is what I have so far:

ul.grafiek {
    float: left;
}
ul.grafiek li {
    float: left;
    display: block;
    margin-left: 6px;
    width: 56px;
    height: 66px;
    padding: 12px 0;
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 1;
    background-color: #c5015a;
}
ul.grafiek li.first-child {
    margin-left: 0;
}
ul.grafiek li.last-child {
    clear: both;
    margin: 10px 0 0 0;
    width: 100%;
    height: 23px;
    padding: 0;
    line-height: 23px;
    background-color: #0a2d7f;
}

IE6 stretches the last <li> to the total width of the <ul>'s parent. IE7 doesn't stretch it at all. How do I make it work in these two browsers also?

PS.: Firefox, Chrome and Opera work a expected.

Answer 1

Can ul.grafiek be defined an explicit width? If so that should work out for IE, as it has issues calculating the total width of floats.

Answer 2

Try setting position: relative; and/or zoom: 1; on ul.grafiek

Answer 3

I have tried like mad to get this done in a clean, CSS-only manner, but I ended up coming to roughly the same point as yourself. IE6 calculates the 100% width of the last list-item first, then wraps the parent around it. (And my IE7 isn't working, couldn't test that.)

What I can recommend is that you create classes for all the different quantities of items you expect (up to a maximum of whatever the screen width will accommodate), and modify the class of the UL to match the number of LI's inside (again, up to the same maximum).

So your UL gains one class:

<ul class="grafiek items6_grafiek">
    <li class="first-child">item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li class="last-child">item</li>
</ul>

And add to your existing CSS:

.items1_grafiek {width: 56px}
.items2_grafiek {width: 118px}
.items3_grafiek {width: 180px}
.items4_grafiek {width: 242px}
.items5_grafiek {width: 304px}
.items6_grafiek {width: 366px}

And possibly, if you are adding items dynamically in JS, you'll need to change the itemsN_grafiek class to the correct one.

Answer 4

I noticed that you have a fixed height on that last element. That opens us up the door to try some absolute positioning tricks, and I think that (along with some CSS hacks or conditional comments) will get you what you're looking for.

If I change ul.grafiek like so:

ul.grafiek {
    float: left;
    position: relative;      
    border: 1px dashed gray; /* just for visualization while working on the problem */
    margin: 0;               
    padding: 1px;
    *padding-bottom: 33px;
}

And add *position: absolute; and *bottom: 0; to ul.grafiek li.last-child, I get a layout that's essentially the same in Firefox 3.6, Safari 4, IE6, and IE7.

I say essentially because there are some differences in the li heights between IE and everything else. These will go away if you add a doctype declaration, but the layout will then break in IE6 again. :|