Resize unknown number of elements to fill width of parent container

Question

I need to put an unknown number of divs (likely a limit of about 5) into a parent container and always make sure they remain equally divided. I\'m not sure if this can be do

Answer 1

Unfortunatly I think you'll have to use tables to do this. As <td>'s resize itslef to fit into the full width.

HTH

Answer 2

To do that with any element, you have two solutions:

• make the browser simulating the table behavior
• using Flexible Box layout

For instance, to build an horizontal menu, with equal width of every li elements, with this HTML code :

<div id="menu">
  <ul>
    <li><a href="#">First Element</a></li>
    <li><a href="#">Second Element</a></li>
    <li><a href="#">Third Element</a></li>
    ...
    <li><a href="#">N Element</a></li>
  </ul>
</div>

Using the table layout, CSS code would look like that:

#menu{
  width: 100%; /* for instance */
  display: table;
  table-layout: fixed;
}
#menu ul{
  display: table-row;
}
#menu ul li{
  display: table-cell;
}

Flexible Box layout is a more modern solution, and it's pretty widely supported nowadays:

#menu{
  width: 100%; /* for instance */
}
#menu ul{
  display: flex;
  flex-flow: row;
}
#menu ul li{
  flex-grow: 1;
}

Answer 3

Try this solution (demo page).

Basically, you need to make the divs display:inline-block, and apply text-align:justify to them. Then force a line break. One drawback is there will always be some space between divs, i.e. no way to make their edges touch.