Allocate Equal Width To Child Elements With Css

I have a fixed-width area and, depending on the circumstances, I need to place either four divs or two. If I have two divs, it should look like this: If I have four divs, it shoul

Solution 1:

Assuming the following sample markup:

<divclass="wpr"><div></div><div></div><div></div></div>

Solution #1 - Flexbox

.wpr {
  display: flex;
  width: 400px;
}

.wprdiv {
  flex: 110;
  border: 1px solid yellow;
  background: pink;
  text-align: center;
  min-height: 40px;
}

<divclass="wpr"><div></div><div></div><div></div></div><divclass="wpr"><div></div><div></div></div><divclass="wpr"><div></div><div></div><div></div><div></div><div></div><div></div></div>

Solution #2 - CSS tables with table-layout:fixed

.wpr {
    display:table;
    table-layout:fixed;
    width: 400px;
    min-height: 40px;
    
}
.wprdiv {
    display:table-cell;
    border: 1px solid yellow;
    background: pink;
}

<divclass="wpr"><div></div><div></div><div></div></div><divclass="wpr"><div></div><div></div></div>

Solution 2:

Another way to achieve this is to specify the with of each box based on how many boxes you have.

This can be done in CSS 3 with a bit of nifty thinking.

Given the following HTML:

<divclass="theContainer"><section>One</section><section>Two</section></div><divclass="theContainer"><section>One</section><section>Two</section><section>Three</section></div>

We can do this with our CSS:

.theContainersection:nth-last-child(2),
.theContainersection:nth-last-child(2) ~ section { width: 49%; }

Here our selector is saying: Give me the section element inside theContainer, starting from the end and working backwards to the second element (from the end). Also, give me all section elements that are around that element.

If we have enough elements, when we count backwards through the collection, we'll hit an element and our selector will match. If we do not have enough items, our selector will find nothing at that position. For example, if we have 3 items and our selector asks for nth-last-child(4), we'll be counting backwards from the end of the collection by 4 items which will go past all of our existing items and select nothing. Hence our selector only kicks in if it finds an item at position x, working backwards from the end.

.theContainersection:nth-last-child(3),
.theContainersection:nth-last-child(3) ~ section{ width:  32%; }

Here we ask for the 3rd section element from the end and any surrounding section elements.

In the first directive we're asking the browser to find all general section siblings within our div where the div has a last child of 3 or 2.

When there exists a last child 3, then our 32% value will kick in. When there exists a last child 2 then our 50% value will kick in.

Here's a jsFiddle showing this solution in action: http://jsfiddle.net/HreBe/

Solution 3:

You can do this a few ways.

• Count the results using a server language. Send a string to each div's class, along with result set, based on a switch or condition around the count.
• Count the number of children in the parent and distribute the desired width across the children.

I think the latter is purely css. The sooner would require a server language.