Allocate equal width to child elements with css

Question

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 should look like this,

Currently I'm placing four divs with a width of 25%. How can I manage, with CSS, to set the condition: if I have two divs only, increase the div sizes to 50% per each to completely cover the intended area as four divs does.

Edit

Sometimes I don't want to display the orange colored area or 225% area. In these cases, I need to stretch the yellow colored area and the 200% area.

Answer 1

Assuming the following sample markup:

<div class="wpr">
    <div></div>
    <div></div>
    <div></div>
</div>

Solution #1 - Flexbox

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

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

<div class="wpr">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="wpr">
  <div></div>
  <div></div>
</div>

<div class="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;
    
}
.wpr div {
    display:table-cell;
    border: 1px solid yellow;
    background: pink;
}

<div class="wpr">
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="wpr">
    <div></div>
    <div></div>
</div>

Answer 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:

<div class="theContainer">
    <section>One</section>
    <section>Two</section>
</div>

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

We can do this with our CSS:

.theContainer section:nth-last-child(2),
.theContainer section: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.

.theContainer section:nth-last-child(3),
.theContainer section: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/

Answer 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.