• October 6th, 2011
• Posted by TheHahn
• Boise Office
• No Comments

Inline-block is spectacular.

Check out this menu, it auto adjusts the spacing between items.

CSS (sans color|padding):
div { width:100%; text-align:justify; }
a { padding:10px 20px; display:inline; }
span { display:inline-block; width:400px; }

Now I get a menu that spans the container with automatic spacing. With justified text the last line is not stretched. To force the single line to expand I added an element that is well beyond enough width to force a carriage return. Note that inline block only works in IE if the element is inline by default. In FF 2.0 inline-block is not supported, but can be cheated like so:
display: -moz-inline-block;
display: inline-block;

So… good luck!