Horizontal menus and definite/fixed widths
This tutorial explains how to create a horizontal menu with list items of a definite width. In other words, a menu where you are able to set the width of the list-items, in contrast to a menu where the list-items have automatic widths (if that's what you want to do, check out the tutorial on Horizontal menus and list items with automatic widths).
A basic menu with list items all the same width
Your main reason for wanting to give your list-items definite widths will probably be because you want them all to be the same size; not different lengths depending on their content. Let's demonstrate how that's done.
Here, we'll create a basic horizontal menu with list-items of a width of 80px.
In the example, we're giving our list items a width of 80px, which, for this menu, is sufficient, and will not cause any of our text to spill over onto the next line if the user increases the text size. Next, we're applying a
float:left to our
lis, to get them to float next to each other.
There's another piece of CSS I've added that is very important:
overflow:auto. Because our list-items have been given a
float:left and our menu doesn't have a definite height, this causes the float to "leak" out of the menu, i.e., the menu to behave as if it doesn't have content. We rectify this by adding
overlofw:auto to the menu (or giving it a definite height), which gently reminds it that it does have content.
overfow:auto in effect stretches our menu down to cover its items, so all the other objects on the page know they are there.
For more on expanding elements to fit their contents, see my tutorials How to make an element stretch to fit its contents.