Extend last li to remaining width of a ul?

Question

I have been puzzled about this for a while now. Here is what i have now:

-------------------------------------------------------------------------------
|            


        

Answer 1

You can float all elements but the last to the left.

The last element's box model will then extend behind these floated list items (even though the content doesn't). overflow:hidden will prevent this behaviour; the box model will begin when the last floated item ends, as if the floated items were still in the natural flow of the page.

ul, li{
    margin:0;
    padding:0;
    
    list-style-type:none;
}

ul li{
    display: block;
    float:left;
}

ul li:last-child{
    background-color: #ffffd;

    float:none;
    overflow:hidden;
}

    
Item
    
Item
    
I will extend to the end of the page.. No matter how far. I will also not drop beneath my previous items, even if the text in here requires me to span over multiple lines.
    

An edit of your newly added JSFiddle:

JSFiddle