Child spans of the same width

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

Thanks!

Answer 1

If you have a fixed width container, then you are losing some of the effectiveness of a percentage width child span.

For your case of 33% you could add a class to the first and every 4th child span to set the correct width as necessary.

<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>

where

.first-in-row { width:auto; // or width:XXX px; }

Answer 2

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
}

Answer 3

have you tried the decimal values, like setting width to 33.33%?

As specified in the CSS syntax, the width property (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) can be given as <percentage> (http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage), which is stated to be a <number>.

As said at the number definition (http://www.w3.org/TR/CSS21/syndata.html#value-def-number), there some value types that must be integers, and are stated as <integer>, and the others are real numbers, stated as <number>. The percentage is defined as <number>, not as <integer> so it might work.

It will depend on the browser's ability to solve this situation if it can't divide the parent's box by 3 without remaining, will it draw a 1- or 2-pixel space, or make 1 or 2 spans out of three wider than the rest.

Answer 4

In reference to Xian's answer, there's also the :first-child pseudo-element. Rather than having first-in-row class, you'd have this.

span:first-child {
    width: auto;
}

Obviously, this is only applicable to a single line menu.