Question

I have a div containing divs with content.
The outer div has a dynamic width (e.g. 80%).
The inner divs have a fixed width (e.g. 100px).

The problem is that i want to show only so much inner div’s so that no inner div “overflows” / “is cut” as in figure 1.

I also want to “distribute” the “free” space as margin between the inner divs equally distributed, as shown in figure 2.

I hope somebody understands my problem, and knows how to realize this with css and as less javascript as possible 🙂

P.S.: If it is easy to do, would it be possible to have the first and the last div have a max. margin to the outer borders ?

Answer 1

Started this before you edited your question with more info, but I believe that the one missing piece you’re after is the text-align: justify in the ‘outer’.

.outer{
    background: red;
    width: 80%;
    overflow: hidden;
    height: 48px;
    text-align: justify;
}

.inner{
    background: blue;
    width: 100px;
    height: 40px;
    margin: 4px;
    display: inline-block;
}​

Here’s a fiddle.

Not entirely sure what you mean by max-margin, but it sounds like that could be achieved by giving the container a fixed padding on the left and right.