CODEWITHSUNDEEP
htmlcsshtml-lists
roryok
roryok

Reputation: 9645

Auto stretch a list element with CSS

I've got a ul element with a variable number of li elements. I want the last li element to always fill the remaining space on the first line, or, if there's less than a predefined minimum, I'd like it to move to a new line.

Diagrams to demonstrate:

enter image description here

I've tried this with various combinations of float left, float right, display block, inline, inline-block, table, min-width etc. I can't make it work. I'm willing to do down the javascript route if necessary but first I wanted to see if anyone can figure it out in pure CSS for me

Upvotes: 1

Views: 265

Answers (1)

SW4
SW4

Reputation: 71160

You want to use some nifty CSS- namely remove the default styling for your list and list items, then float each li left except the last one- which you apply overflow:hidden; to to force it to take up the remaining space. By giving it a min-width you also specify it should move to a newline after a certain point.

nb. You'll want to change the 200px to 250px

Demo Fiddle

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul, li{
    list-style:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
    height:10px;
}
li{
    float:left;
    border:1px solid red;
    width:100px;
}
li:last-child{
    float:none;/* <--- stop the last item from being floated */
    width:auto;/* <--- make the last item have an automatic width */
    overflow:hidden;/* <--- force it to take up the remaining space */
    min-width:200px; /* <--- except if the remaining space is less than 200px, in which case move it to a new line */
}

Upvotes: 5

Related Questions