Anthony Hiscox Anthony Hiscox - 2 months ago 4x
CSS Question

Resize unknown number of elements to fill width of parent container

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 done with CSS alone but I figured I better ask. So if we know that 3 divs are used:

.menu-button {
float: left;
width: 33%;
<div class="menu-button">Button X</div>
<div class="menu-button">Button Y</div>
<div class="menu-button">Button Z</div>

Seems to work, but what if the number of .menu-button divs is unknown? Is there a better way to do it so it automatically adjusts horizontally?


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