I had this horizontal menu (list based, like all the cool kids are doing these days), but it was just a little too long.
+--------+ +--------+ +------ | Item A | | Item B | | Item +--------+ +--------+ +------ --+ C | --+
Since each of the menu items were at least two words long, i decided that they could go on two lines. Simply adding a <br> didn't do the trick -- it pushes the entire menu down a line on each break.
Thanks to Phrogz on #css who pointed out that the trick is to use the following two CSS statements:
display: table-cell; display: inline-block;
inline-block for IE and Safari, table-cell for Mozilla. Adding this to the anchors in the list items results in something like:
+------+ +------+ +------+ | Item | | Item | | Item | | A | | B | | C | +------+ +------+ +------+
