Anthony Hiscox Anthony Hiscox - 3 months ago 8
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:

<style>
.menu-button {
float: left;
width: 33%;
}
</style>
<div>
<div class="menu-button">Button X</div>
<div class="menu-button">Button Y</div>
<div class="menu-button">Button Z</div>
</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?

Answer

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

HTH