<p>I am trying to create a horizontal menu with the elements represented by <code>&lt;span&gt;</code>'s. The menu itself (parent <code>&lt;div&gt;</code>) has a fixed width, but the elements number is always different.</p>

<p>I would like to have child <code>&lt;span&gt;</code>'s of the same width, independently of how many of them are there.</p>

<p>What I've done so far: added a <code>float: left;</code> 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 <code>&lt;div&gt;</code>, 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.</p>

<p>What else could I try?</p>

<p>It seems like this is a very common problem, however googling for "child elements of the same width" didn't help.</p>

[{'answer_id': 47465, 'author': 'Xian', 'author_id': 4642, 'author_profile': 'https://Stackoverflow.com/users/4642', 'pm_score': 2, 'selected': False, 'text': '<p>If you have a fixed width container, then you are losing some of the effectiveness of a percentage width child span.</p>\n\n<p>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.</p>\n\n<pre><code>&lt;div&gt;\n&lt;span class="first-in-row"&gt;/&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span class="first-in-row"&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;...\n&lt;/div&gt;\n</code></pre>\n\n<p>where </p>\n\n<pre class="lang-css prettyprint-override"><code>.first-in-row { width:auto; /* or */ width:XXX px; }\n</code></pre>\n'}, {'answer_id': 47466, 'author': 'sblundy', 'author_id': 4893, 'author_profile': 'https://Stackoverflow.com/users/4893', 'pm_score': 3, 'selected': True, 'text': '<p>You might try a table with a fixed table layout. It should calculate the column widths without concerning itself with the cell contents.</p>\n\n<pre class="lang-css prettyprint-override"><code>table.ClassName {\n    table-layout: fixed\n}\n</code></pre>\n'}, {'answer_id': 47474, 'author': 'zappan', 'author_id': 4723, 'author_profile': 'https://Stackoverflow.com/users/4723', 'pm_score': 0, 'selected': False, 'text': '<p>have you tried the decimal values, like setting width to 33.33%?</p>\n\n<p>As specified in the CSS syntax, the width property (<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/visudet.html#the-width-property</a>) can be given as &lt;percentage&gt; (<a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage</a>), which is stated to be a &lt;number&gt;.</p>\n\n<p>As said at the number definition (<a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-number" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/syndata.html#value-def-number</a>), there some value types that must be integers, and are stated as &lt;integer&gt;, and the others are real numbers, stated as &lt;number&gt;. The percentage is defined as &lt;number&gt;, not as &lt;integer&gt; so it might work.</p>\n\n<p>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.</p>\n'}, {'answer_id': 47492, 'author': 'sblundy', 'author_id': 4893, 'author_profile': 'https://Stackoverflow.com/users/4893', 'pm_score': 0, 'selected': False, 'text': "<p>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.</p>\n\n<pre><code>span:first-child {\n    width: auto;\n}\n</code></pre>\n\n<p>Obviously, this is only applicable to a single line menu.</p>\n"}]
['https://Stackoverflow.com/questions/47447', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3894/']