Question

I am trying to create a horizontal menu with the elements represented by <span>‘s. The menu itself (parent <div>) has a fixed width, but the elements number is always different.

I would like to have child <span>‘s of the same width, independently of how many of them are there.

What I’ve done so far: added a float: left; style for every span and specified its percentage width (percents are more or less fine, as the server knows at the time of the page generation, how many menu items are there and could divide 100% by this number). This works, except for the case when we have a division remainder (like for 3 elements), in this case I have a one-pixel hole to the right of the parent <div>, and if I rounding the percents up, the last menu element is wrapped. I also don’t really like style generation on the fly, but if there’s no other solution, it’s fine.

What else could I try?

It seems like this is a very common problem, however googling for ‘child elements of the same width’ didn’t help.

Answer 1

You might try a table with a fixed table layout. It should calculate the column widths without concerning itself with the cell contents.

table.ClassName {     table-layout: fixed }