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:

-------------------------------------------------------------------------------
|                   |                  |                     |
|       Item 1      |      Item 2      |      Last item      |
|                   |                  |                     |
-------------------------------------------------------------------------------

There, the last li is only taking up part of the ul. I need it to look like this:

-------------------------------------------------------------------------------
|                   |                  |                                      |
|       Item 1      |      Item 2      |              Last item               |
|                   |                  |                                      |
-------------------------------------------------------------------------------

I can not use Javascript (or Jquery). I do not want to set the width of each li, since the text size could vary, and i do not know how many li's there will be. I might have 5 or 3.'

How would i accomplish this? Thanks.

Here is a jsfiddle with some of my code. I need the lighter color to expand the rest of the ul. JSFIDDLE

Alyose

Could you write a small test case using jsfiddle plz? – Colby

Copy-paste the relevant markup you have so far to the question, and if possible use a site like jsfiddle.net to provide a live demo. – Nore

If you want all li's to have the same width, except the last one (without specifying any widths), this won't be possible with just CSS. – Biauriculate

@Juhana I edited it with a JSfiddle. – Alyose

Please indicate the browsers (and versions) your code should support also. I don't think IE<8 supports selectors like last-child, last-of-type etc. – Shoebill

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: #ddd;

    float:none;
    overflow:hidden;
}

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>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.</li>    
</ul>

An edit of your newly added JSFiddle:

JSFiddle

Fellmonger

Thanks. Will this work if i have another ul in side a li...like a ticker of some sorts? – Alyose

Thanks for the solution. This may be a separate question, but how come it doesn't work if I apply a css class to the last li element? – Comfrey

Brilliant... Thanks – Runnerup

Answer 2

ul>li:last-of-type {width:whatever}

So the two li's before the last would float:left and have 20% on both and the last one can have 60%;

Also don't forgot to clear the flaots with

ul {overflow:auto;}

and keep the % perfect so the borders do not escape:

ul>li {box-sizing:border-box;}

Scoria