Stories
Slash Boxes
Comments
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

Journal of LTjake (4001)

Tuesday July 06, 2004
02:04 PM

list-based, horizontal menus w/ two-line high items

[ #19715 ]

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  |
+------+ +------+ +------+

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
 Full
 Abbreviated
 Hidden
More | Login | Reply
Loading... please wait.