Lay out children with equal space between each other to fill container

Question

I have a div with a variable width, and I have a variable amount of children inside this div. I want the children to fill up the space inside the div . I first tried to change the div to display:table and the children to display:table-cell but I ended up all the children filling up all the space and not obeying their width and max-width properties. Then I've tried the table approach: I've changed the div to a table (yes, I know, it's not recommended, that's why I'm probably here asking) and wrapped the children into a tr and each in td s, but I ended up all the children cells filling up the whole space, but aligned to left (I've set the children div s display:inline-block ):

If I change the alignment to center , I get this:

They are centered, but I still get spaces on the left and right of the parent (with the yellow background that I've set for distinguishing). What I actually want is this:

I've achieved this by setting the first td to align text to left, the second to center, the third to right. But I may have more of these thumbnails, so I need a general solution.

How can I lay out a variable number of children inside a container to fill the width, with the first element starting at the exact left border of the container (unlike the second image) and the last element ending at the exact right border of the container (like shown in the third image)?

Answer 1

Something like this?

HTML:

<div>
    <span id="s1"></span>
    <span id="s2"></span>
    <span id="s3"></span>
</div>

CSS:

div{
    background: #ff6;
    text-align: justify; /* Important */
    font-size: 0; /* Used to remove spaces */
}
div:after{ /* Used to create a new last line */
    content: '.';
    display: inline-block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

span{
    display: inline-block;
    height: 150px;
}

/* Use your widths, min-widths and max-widths here: */
#s1{
    background: red;
    width: 15%;
    min-width: 50px;
    max-width: 150px;
}
#s2{
    background: green;
    width: 40%;
    min-width: 50px;
    max-width: 250px;
}
#s3{
    background: blue;
    width: 40%;
    min-width: 50px;
    max-width: 200px;
}

Demo

You can obtain equally spaced boxes using text-align: justify on the wrapper. The problem is that it doesn't work for the last line (which in this case is the first too), so you can either use text-align-last , or an :after pseudo element with width: 100% in order to create a new last line.