Question

I’d like to render a list of items either horizontally or vertically, depending on available horizontal space. The contents of the list items may change dynamically, so @media queries don’t really help.

Example:

item1 item2 item3 item4   |<-- right border of parent box

Now we change item2 to muchlongeritem2 and the layout should change to:

item1                     |
muchlongeritem2           |<-- right border of parent box
item3                     |
item4                     |

Is there a way to achieve this using only CSS? I could come up with a JavaScript solution, but if someone has some code ready I’d be happy to check it out, too.

Answer 1

I’ve used something similar recently, here’s a snippet:

$(document).ready(function () {

    // Fluid navigation helper
    var list_item = $("nav ul").children();
    var list_item_length = list_item.length;
    var list_item_width = Math.floor(978 / list_item_length);
    var left_overs = 978-(list_item_width*list_item_length);
    for (var i = 0, len = list_item.length; i < len; i++ ) {
        list_item[ i ].style.width = list_item_width+"px";
    }
    if (left_overs) {
        $("nav ul li:first-child").css("width", list_item_width+left_overs+"px");
    }

});