This is meant for a menu.
For example I have a div element with 3 spans in it, all of which have some margin, max-width and float (left or right).
It is positioned starting from the left side and goes like this:
[[span1][span2][span3] - lots of free space here].
I want to make it even out like this:
[[span1] - space - [span2] - space - [span3]]
How can I do this using CSS? I kinda doubt it is not possible.
Note that I want it to keep the same style when I add or remove a menu item.
HTML:
<div id="menu">
<span class="menuitem"></span>
<span class="menuitem"></span>
<span class="menuitem"></span>
</div>
CSS:
#menu {
...
width:800px;
}
.menuitem {
display:block;
float:left;
margin-left:25px;
position:relative;
min-height:35px;
max-width:125px;
padding-bottom:10px;
text-align:center;
}
Best Answer
In the 'old days' you'd use a table and your menu items would be evenly spaced without having to explicitly state the width for the number of items.
If it wasn't for IE 6 and 7 (if that is of concern) then you can do the same in CSS.
CSS:
Without having to adjust for the number of items.
Example without
table-layout:fixed
- the cells are evenly distributed across the full width, but they are not necessarily of equal size since their width is determined by their contents.Example with
table-layout:fixed
- the cells are of equal size, regardless of their contents. (Thanks to @DavidHerse in comments for this addition.)If you want the first and last menu elements to be left and right justified, then you can add the following CSS: